Ember-power-select: Inherit width of longest option?

[davelowensohn]

Loving this component, thanks for keeping the dream alive. Is it possible for both the .ember-power-select and .ember-power-select-dropdown elements to inherit the width of the longest option? I've been unable to get the behavior I want without resorting to fixed widths & would like to be able to have variable width select boxes without line breaks or overflow.

[cibernox]

Not exactly.

There is an option called matchTriggerWidth (defaults to true) that makes the width of the dropdown match the width of the trigger. As I understand you want the opposite.

You pass matchTriggerWidth=false and that means the dropdown will have whatever witdh it needs to fit it's content, but the trigger will remain the same. With the default styles it doesn't looks pretty, but you can tweak them.

Something you can try instead is use renderInPlace=true. That will make the dropdown to be rendered next the the trigger instead of being attached in the root of the body. That means that if the container of the select can grow, it will grow to fit the dropdown and since the trigger is also display: block will grow too.

Just be aware that if you do that the dropdown will inherit the z-index of its container. 95% of the time that is what you want, but sometimes inside relative elements can have some problems.

CSS is hard :disappointed:

[cibernox]

Another option matchContentWidth could be an option for this cases, but it's not implemented.

[cibernox]

Also another note matchTriggerWidth is only available in master for now, I haven't released it yet.

[davelowensohn]

These are all great solutions, thanks!