Skip to content

angular-scroll-dropdown is a directive which allow bootstrap-ui dropdown in an overflow:auto or overflow:scroll element without be hidden.

License

Notifications You must be signed in to change notification settings

Gargaroz/angular-scroll-dropdown

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

angular-scroll-dropdown

Use drop down even in overflow:hidden, auto or scroll element

Basically, you just need to use some directives from angular-scroll-dropdown to do that

Demo

You will find a demo on this page: http://jsfiddle.net/ume7n694/11/

Usefulness

Be able to use the bootstrap dropdown in an element which have overflow property: hidden or auto (scroll) without being hidden by the element itself. For a better exemple, refer to the demo.

Dependencies

You will need some libraries:

  • angular (of course)
  • ui.bootstrap
  • jquery

Usage:

  1. Include both angular-scroll-dropdown.js and angular-scroll-dropdown.css in your index file (index.html for exemple).
  2. Include the angular-scroll-dropdown as a dependency for your app.
angular.module('myApp', ['angular-scroll-dropdown', 'ui.bootstrap'])
  1. Add the class contentscroll to the element which have the overflow property.
<style>
.box {
   /* auto, hidden or scroll */
   overflow: auto;
}
</style>

<div class="box contentscroll">
<!-- elements inside -->
</div>
  1. Add the class dropdownscroll to the the element which will launch the event and dropdown-menu-scoll to the targeted element (the one which will be displayed).
<div class="btn-group dropdownscroll" dropdown>
   <button type="button" class="btn dropdown-toggle">
       Click on me!
   </button>
   <ul class="dropdown-menu dropdown-menu-scoll" role="menu">
       <li>test 1</li>
       <li>test 2</li>
       <li>test 3</li>
       <li class="divider"></li>
       <li>test 4</li>
   </ul>
</div>

About

angular-scroll-dropdown is a directive which allow bootstrap-ui dropdown in an overflow:auto or overflow:scroll element without be hidden.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 100.0%