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

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.

{% highlight html %}
{% endhighlight %}

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.

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.

{% highlight html %}
{% endhighlight %}

Event Listeners

The auto-flip drop-down only receives events.

Event Type Description
click Receives clicks from [data-toggle=dropdown][data-flip]
suggest Fire the suggest event and pass in a drop-down menu $('#dropdownMenu').