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.

Template

Javascript

Result

Click me

Horizontal
autoauto-rightleftcenterright

Vertical
autoabovebelow

Button position
leftright

RenderInPlace
Render in-place

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.

Template

Result

Click me

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.

Template

Result

Click me!

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.