Position

The number one thing that you will want to customize in a dropdown is where the floating content will be positioned in relation to the trigger.

horizontalPosition / verticalPosition

Ember Basic Dropdown comes with a nice set of defaults. The rules are as follow:

• The <dd.Content> has not pre-defined size, so it will adapt to the size its childs.
• The dropdown's content is positioned below the trigger, unless there is not enough space to fit it, in which case it is positioned above it.
• The content's left border will be aligned with the trigger's left border and content will flow towards the right.
• If there isn't enough size towards the right to fit the content but there is enough room to the left, the right border of the content will align with the right border of the trigger and it will grow towards the left.
• All the rules above are re-checked every time the content of the dropdown changes, the browser is resized or the orientation of the device changes.

This sounds like a lot, but with an example it will be crystal clear.

In this example above I'm using the options verticalPosition and horizontalPosition to override the default behaviour.

The default value for both options is auto, but you can pass verticalPosition=above|below and horizontalPosition=auto-right|right|center|left.

Narrow the window of the browser and play with scroll to see the automatic positioning in action.

renderInPlace

Although by default the component renders the content in the root of the app and positions it absolutely, there are some situations where you want the content to be physically next to the trigger.

To do so, pass renderInPlace=true to the component. Inspect the DOM of the next example to see the difference.

Please note that when rendering the content in place, the vertical position will not automatically detect the best position based on the space around the trigger. You have to explicitly pass verticalPosition="above" to render it over the trigger.

matchTriggerWidth

There is a few widgets in which the width of the floating box has to match the width of the trigger design reasons. Since this is common enough, there is an option to enable this behaviour.

In the section about Custom Position strategies we will see how to totally customize how the dropdown is positioned by passing it a function. If you do so the options in this section will not work unless your function, which will receive those options, honors them.