The options are not visible in modals
The list of options in ember-power-select has by default
z-index: 1000. This apparently
magical number is the same that some popular css frameworks like bootstrap use by default for
Modals usually have higher z-indexes (bootstrap itself uses 1050) because if a modal opens
unexpectedly while ember-power-select is open, you don't want the list of options to be placed on top.
However if you want to render a select inside a modal, that is a situation you can predict and design for. There is two possible solutions:
Add a specific class to the select (p.e.
dropdownClass="in-modal-dropdown") will make the dropdown to have the class
"in-modal-dropdown". You can increase the z-index of this kind of selects.
renderInPlace=true. This will make the list of options be placed next to the trigger instead of being attached to the body, and therefore it won't be afected by this z-index issue. Keep in mind that when rendered in place the list of options will loose its ability to intelligently position itself above the component if the space below is too small to fit it.
Nothing is rendered when I click the select
This addon uses the
contentFor hook to add an empty div in the
placeholder defined in the
index.html of most ember-cli applications.
If your application is deviating from the standard approach (by example if you're attaching your
app to a specific node) this approach might not work for your and you'll need to add a
<div id="ember-basic-dropdown-wormhole"></div> manually in your