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:
<dd.Content>has not pre-defined size, so it will adapt to the size its childs.
This sounds like a lot, but with an example it will be crystal clear.
In this example above I'm using the options
to override the default behaviour.
The default value for both options is
auto, but you can pass
Narrow the window of the browser and play with scroll to see the automatic positioning in action.
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
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.