Description

A directive to determine if a dropdown should open to the top or as usual to the bottom. It starts by checking the available space on the closese parent container with the class inner-scroll, fallback to the window.innerHeight if no parent is found. This directive has a direct dependency to the bootstrap dropdown (!)

Preconditions:

• Bootstrap dropdown is used
• Bootstrap dropdown is not used with container="body"
• Bootstrap dropdown is used like it is intended and documented for e.g.

<div dropdown class="dropdown">
 <button class="dropdown-toggle" dropdownToggle>Toggle</button>
 <ul class="dropdown-menu" *dropdownMenu>
   <!-- Content here -->
 </ul>
</div>

<div dropdown c8yBsDropdownDirection class="dropdown">
 <button class="dropdown-toggle" dropdownToggle>Toggle</button>
 <ul class="dropdown-menu" *dropdownMenu>
   <!-- Content here -->
 </ul>
</div>

Make use of the bootstrap dropdown as usual and additionally add the direction directive to it.

Example