I'm working on a snippet I found on Codepen , I made some very small changes to it. I would like the input text that works as a Search Engine to always remain fixed in the top position of the list when scrolling.
In this way, if the user wants to search for a data, it is always present and does not have to scroll to the beginning of the list.
Working on the snippet you can see for yourself.
var myApp = angular.module('myApp', ['ngRoute'])
//ng-route config
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'default.html',
})
.when('/contact-info/:contact_index', {
templateUrl: 'contact_info.html',
controller: 'contactInfoCtrl'
})
.when('/add', {
templateUrl: 'contact_form.html',
controller: 'addContactCtrl'
})
.when('/edit/:contact_index', {
templateUrl: 'contact_form.html',
controller: 'editContactCtrl'
})
.otherwise({
redirectTo: '/home'
});
})
// controllers
.controller('navCtrl', function($scope) {
$scope.nav = {
navItems: ['home', 'add'],
selectedIndex: 0,
navClick: function($index) {
$scope.nav.selectedIndex = $index;
}
};
})
.controller('homeCtrl', function($scope, ContactService) {
$scope.contacts = ContactService.getContacts();
$scope.removeContact = function(item) {
var index = $scope.contacts.indexOf(item);
$scope.contacts.splice(index, 1);
$scope.removed = 'Contact successfully removed.';
};
})
.controller('contactInfoCtrl', function($scope, $routeParams) {
var index = $routeParams.contact_index;
$scope.currentContact = $scope.contacts[index];
})
.controller('addContactCtrl', function($scope, $location) {
//needed to show the correct button on the contact form
$scope.path = $location.path();
$scope.addContact = function() {
var contact = $scope.currentContact;
contact.id = $scope.contacts.length;
$scope.contacts.push(contact);
};
})
.controller('editContactCtrl', function($scope, $routeParams) {
$scope.index = $routeParams.contact_index;
$scope.currentContact = $scope.contacts[$scope.index];
})
// directives
.directive('contact', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'contact.html'
}
})
// services
.factory('ContactService', [function() {
var factory = {};
factory.getContacts = function() {
return contactList;
}
// contact list, usually would be a separate database
var contactList = [
{
id: 0,
name: 'Pablo',
phone: 'Teléfono: 1456789',
regional: 'Centro'
},
{
id: 1,
name: 'Luis',
phone: 'Teléfono: 14589',
regional: 'Sur'
},
{
id: 2,
name: 'Maria',
phone: 'Teléfono: 1785789',
regional: 'Norte'
},
{
id: 3,
name: 'Adriana',
phone: 'Teléfono: 144419',
regional: 'Centro'
},
{
id: 4,
name: 'Carmen',
phone: 'Teléfono: 7896789',
regional: 'Norte'
},
{
id: 5,
name: 'Juan',
phone: 'Teléfono: 057789',
regional: 'Centro'
},
{
id: 6,
name: 'Mario',
phone: 'Teléfono: 1459',
regional: 'Sur'
},
{
id: 7,
name: 'Alejandra',
phone: 'Teléfono: 14524789',
regional: 'Centro'
},
{
id: 8,
name: 'Jhon',
phone: 'Teléfono: 6969',
regional: 'Centro'
},
{
id: 9,
name: 'Maduro',
phone: 'Teléfono: 666',
regional: 'Venezuela'
},
{
id: 10,
name: 'Donald',
phone: 'Teléfono: 9898',
regional: 'iunaites'
},
];
return factory;
}]);#ignorar {
opacity: 0.1;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron" id="ignorar">
<div class="container">
<h1>Listado de Contactos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui nisl. Aliquam dignissim, eros a semper pharetra, dui libero tempor enim, et blandit libero odio eu ante. Ut maximus, lectus at vulputate malesuada, ex velit posuere leo, non
gravida sapien purus in nulla.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="global-wrapper" ng-app="myApp">
<div class="container" style="padding: 30px 50px 30px 50px;">
<div class="row panel panel-primary" ng-controller="homeCtrl">
<div class="panel-heading">
</div>
<!-- contact list -->
<div class="col-xs-5 panel-body scrollbar" id="style-2" style="overflow: auto; max-height: 400px;">
<ul class="list-group">
<li class="list-group-item">
<input class="form-control" placeholder="Búsqueda" type="text" ng-model="searchText"><br>
<contact class="list-group-item" ng-repeat="contact in contacts | orderBy: 'name' | filter: searchText "></contact>
</li>
</ul>
</div>
<!-- ng-view below -->
<div class="col-xs-7">
<div class="list-group panel-body">
<div ng-view></div>
</div>
</div>
</div>
</div>
<!-- html templates used by angular, usually in separate files -->
<script type="text/ng-template" id="default.html">
<div class="alert alert-success text-center" ng-class="{hidden : !removed}"> {{removed}}</div>
<div class="list-group-item text-center">Seleccione un contacto para ver su información</div>
</script>
<!-- template for displaying a contacts info -->
<script type="text/ng-template" id="contact_info.html">
<div class="list-group-item">
<h3 class="text-center">{{currentContact.name}}</h3>
<hr><br>
<p>{{currentContact.phone}}</p>
<p>{{currentContact.email}}</p>
<p>{{currentContact.cargo}}</a>
</p>
<p>{{currentContact.dependencia}}</p>
<p>{{currentContact.regional}}</p>
</div>
</script>
<!-- template used for the ng-repeat in the contact list -->
<script type="text/ng-template" id="contact.html">
<a ng-href="#/contact-info/{{contacts.indexOf(contact)}}">
{{contact.name}}
</a>
</script>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js'></script>What I tried at first was to apply position: fixed, the input occupied the entire width of the container (I fixed it by defining a width) but when scrolling on the page, the search engine did not remain fixed in its position with respect to the list but rather it does so with respect to the whole body.
I also tried to remove it from the listing wraper but then it no longer performed the search function.
In summary
That when scrolling over the list of contacts, the search box remains fixed in its position
Thank you very much.
This occurs to me: you take out the search box in a
divseparate and give it the styles you require inline...You can simulate the behavior with CSS, a sample of how you can achieve this, use these rules:
Pon estas lineas y lograras el resultado, aunque tendrás que ajustar los selectores para que no modifique el comportamiento en otros lados de tu proyecto.
My answer is simple but shouldn't you try position : sticky?
The class in Bootstrap is: "position-sticky" or class="sticky-top". and see that that div is out of the list or that form so that it is a separate element. Then adjust the properties.
Even using Z-index as a property if you keep the position fixed.