Dropdown-autoflip

Auto-Flip Dropdowns dropdown-autoflip.js

Additional functionality added to drop-down menus that enables dropup menus instead of drop-down menus based on screen position.

Examples

Add data-flip="auto" to a drop-down trigger data-toggle="drop-down". (You may need to scroll up to trigger this functionality.) Place this menu at the bottom of the screen to implement a drop-up menu.

<div class="btn-group">
	<button class="btn btn-danger" type="button">Auto-Flip Drop-down</button>
	<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-flip="auto" type="button">
		<span class="caret"></span>
		<span class="sr-only">Toggle Drop-down</span>
	</button>
	<ul class="dropdown-menu" role="menu" >
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>

Alignment

By default, Fuel UX automatically positions the drop-down menu 100 percent from the top and along the right side of its parent. Remove .dropdown-menu-right to a .dropdown-menu to left align the drop-down menu.

Usage

The dropdown-autoflip add-on determines whether to show a drop-down menu or a dropup menu by calculating the position on the screen and the edge of the viewport. If the positioning requires a drop-up menu, add .dropup to the .dropdown-menu element.

Markup

Add data-flip="auto" to a drop-down menu within a class="fuelux" container.

<div class="btn-group">
	<button class="btn btn-danger" type="button">Auto-Flip Drop-down</button>
	<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" data-flip="auto" type="button">
		<span class="caret"></span>
		<span class="sr-only">Toggle Drop-down</span>
	</button>
	<ul class="dropdown-menu" role="menu" >
		...
	</ul>
</div>

Event Listeners

The auto-flip drop-down only receives events.