1

Estoy trabajando sobre un snippet que encontré en Codepen, le hice unos cambios muy pequeños. Quisiera que el input text que funciona a modo de Buscador quedara siempre fijo en la posición superior del listado cuando haga scroll.

De esta forma si el usuario quiere buscar un dato siempre esté presente y no tenga que desplazarse hasta el inicio del listado.

Trabajando en el snippet lo pueden notar por ustedes mismos.

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>

Lo que intenté en un principio fue aplicar position: fixed, el input ocupó todo el ancho del contenedor (lo arreglé definiendo un ancho) pero al hacer scroll sobre la página, el buscador no se quedaba fijo en su posicion respecto al listado sino que lo hace respecto a todo el body.

También traté de sacarlo del wraper del listado pero luego ya no realizaba la función de búsqueda.

En resumen

Que al hacer scroll sobre el listado de contactos, el cuadro de busqueda se quede fijo en su posición

Muchas gracias.

3 respuestas 3

2

Puedes simular el comportamiento con CSS, una muestra de cómo puedes lograr esto, usa estas reglas:

li.list-group-item {
    position: initial;
    max-height: 26rem; // FORZA UN ALTO MÁXIMO PARA SIMULAR LO QUE BUSCAS
    overflow: auto;
}

input.form-control.ng-pristine.ng-valid {
    position: absolute;
    z-index: 10;
    width: calc(100% - 46px);
}

ul.list-group {
    position: relative;
}

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.

4
  • Hola y gracias por tu tiempo, tu respuesta es interesante pero no logro aún conseguir lo que deseo. A lo mejor si pudiera ejecutar tu código y asi saber que no sea un problema mio
    – EMCode
    Commented el 11 mar. 2019 a las 13:55
  • Bueno es algo muy ambiguo pero basta que encapsules el css (quitando la nota) en un bloque <style> con eso no deverías tener problemas.
    – etxu00
    Commented el 12 mar. 2019 a las 19:16
  • 2
    Ya lo probe y logre el resultado, te anexo un pequeño vídeo para que veas cómo lo conseguí. Toma en cuenta que el bloque hay agregar fuera del área donde se reescribe el html. drive.google.com/file/d/1EJVluntDezQPJvXJ_xtR5r-gjGPLgu5s/…
    – etxu00
    Commented el 12 mar. 2019 a las 19:48
  • Mil gracias por tomarte todo el tiempo incluso con un video para mostrar tu codigo!
    – EMCode
    Commented el 19 mar. 2019 a las 18:17
2

Se me ocurre esto: sacas la caja de búsqueda en un div separado y le das los estilos que requieras en línea...

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;
  }]);
<!-- 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="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="panel-body">
        <input class="form-control" placeholder="Búsqueda" type="text" ng-model="searchText" style="position: fixed; width: 25%; z-index: 1000;"><br>
      </div>
      <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">
            <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>

1
  • Gracias por tu tiempo, acabo de editar mi código para explicar visualmente lo que sucede si aplico una posicion fija, el buscador queda con posicion fija pero respecto a toda la página y no uniamente respecto al contenedor que es el listado
    – EMCode
    Commented el 8 mar. 2019 a las 21:14
1

Mi respuesta es sencilla pero no deberias probar con position : sticky?

La class en Bootstrap es: "position-sticky" o class="sticky-top". y ver de que ese div este fuera de la list o ese form para que sea un elemento aparte. Luego ajustar las propiedades.

Incluso utilizando Z-index como propiedad si es que mantienes el position fixed.

1
  • Gracias Nicolas por tu respuesta, pero como lo planteas me daría el mismo resultado de @DjCrazy
    – EMCode
    Commented el 8 mar. 2019 a las 21:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.