Dropdown

Dropdowns can serve different purposes. They can be used to show additional information about something, or to provide more detailed configuration options or a selection to choose from. Frontfire provides an easy way to open a dropdown anywhere.

The contents of the dropdown is defined in an HTML element and can contain anything you like. The element needs the dropdown CSS class which applies basic dropdown styles and makes the element invisible at first. The additional bordered class can be used to draw a border around the dropdown element.

To open a dropdown at an element, call the dropdown jQuery extension function on the element to trigger the dropdown. The function takes two arguments: The target, of which the rectangle will be used for determining the position, and options. The options are optional and can alternatively be specified as data-opt HTML attributes with the dropdown HTML element. The following options are supported:

Option	Type	Description	Default
`placement`	String	The placement of the dropdown relative to the target element. Values: combinations of one or two out of: top, bottom, left, right, center. Order matters, center always comes last.	bottom-left
`autoClose`	Boolean	Indicates whether the dropdown is closed when clicking anywhere outside of it.	true
`closeOnResize`	Boolean	Indicates whether the dropdown is closed when the window is resized.	true
`closeOnHide`	Boolean	Indicates whether the dropdown is closed when the document is hidden.	true
`maxHeight`	Number	The maximum height of the dropdown, in pixels.	0 (no limit)

To open a dropdown, use code like this:

$("#button1").click(function (event) { $("#dropdown1").dropdown(this, options); });

To specify the options on the trigger element instead of the dropdown element, use code like this:

$(".open-dropdown1").click(function (event) { $("#dropdown1").dropdown(this, { placement: $(this).data("dropdown-placement") }); });

Here are a number of trigger buttons that open the same dropdown in different directions.

The following example shows how a dropdown behaves when opened for a trigger in a scrolling area. Scroll down to see the button.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in augue bibendum, efficitur nunc vel, placerat massa. Duis enim dui, ultrices eu felis cursus, lacinia fermentum erat. Mauris id ipsum mi. Duis nec vulputate sem, vel egestas justo. Maecenas suscipit tristique lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sollicitudin ex laoreet mi tempus, id mollis dolor scelerisque. Mauris iaculis tristique ligula, eget efficitur sapien iaculis sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ac hendrerit dui. Nullam quis dui ut massa mollis gravida. Duis pellentesque, libero quis facilisis volutpat, odio erat tempor nisl, at tincidunt risus diam ut urna.

Aenean iaculis lectus ac finibus venenatis. Nullam auctor libero eu viverra sagittis. Phasellus tempus erat nec arcu mollis interdum. Aenean feugiat tellus quis venenatis malesuada. Vestibulum ac hendrerit dui. Nullam quis dui ut massa mollis gravida. Duis pellentesque, libero quis facilisis volutpat, odio erat tempor nisl, at tincidunt risus diam ut urna. Curabitur a nisi eu ipsum posuere malesuada. Nunc malesuada purus ante, eget dictum orci mattis vel. Aliquam quis efficitur dolor. Sed auctor non velit eget congue.

This dropdown closes automatically when clicking outside, and it has a link inside.

This dropdown does not automatically close. Use the provided close link.

The dropdown can be closed by code. This is done through a plugin extension function with a syntax similar to other jQuery functions.

$("#dropdown1").dropdown.close();

Automatic placement

If the specified placement is empty, then the dropdown is placed like bottom-left or top-left, depending on where is enough space to show the dropdown.

If the specified placement is “right”, then the dropdown is placed like bottom-right or top-right, depending on where is enough space to show the dropdown.

Scrolling

If there is not enough vertical space on the side where the dropdown is opened, then the dropdown contents is scrollable. The height of the dropdown can also be limited, which may lead to a scrollable content.

Pellentesque efficitur dapibus ante interdum elementum. Fusce scelerisque finibus lectus nec fermentum. Integer finibus, purus at maximus luctus, sapien nulla varius urna, id pulvinar ligula arcu nec tortor. Aenean vitae ornare arcu. Donec viverra id urna in iaculis. Nulla vestibulum sed mauris ut scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sem tortor, hendrerit at velit non, accumsan ultricies felis. Aenean molestie ligula justo, nec efficitur lorem luctus ut. Quisque porta, nulla id placerat pretium, orci augue luctus dui, ac finibus urna diam vel lectus. Pellentesque ornare aliquet risus, eu feugiat tortor mollis ac. Integer tempus blandit dui sed rutrum.