Implement a matchContentWidth option to "inherit width of longest option"

[mansona]

trafficstars

This is mostly an issue to keep track of a feature request that @cibernox mentioned here: https://github.com/cibernox/ember-power-select/issues/301#issuecomment-182027192

I would love this feature 👍

[belgoros]

I tried to use use both of the suggested options (matchTriggerWidth and renderInPlace) and it does not work either:

# templates/application.hbs
<nav class="navbar-nav mx-auto">
  {{shop-select
    shops=shopService.shops
    aShop=currentShop.shop
    returnToDashBoard=(action "redirectToDashboard")
    matchTriggerWidth=false
    renderInPlace=true
  }}
</nav>

The drop-down list always takes the the width of the selected item length. Any ideas ? Thank you.

[cibernox]

@belgoros I believe that there is a missunderstanding. What matchTriggerWidth and renderInPlace can be used to is to make the list of options to be as width as needed, but I have the hunch that what you want is to make the trigger (the part that is visible even when closed) to be as width as the longest option.

If that is the case, that is virtually impossible. There is no way to know how long the longest option will be without rendering it first.

[belgoros]

@cibernox Thank you for the feedback. Nope, what I want is to make the list of options to be as wider as needed, based on the very longest list item in the list. For example, I have the following HTML select input:

<select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
            <option value="long">VeeeeeeeryLoooooooooooongVeeehicle</option>
</select>

In this scenario, when using ember-power-select, the width of the select input actually depends on the length of the selected item instead of the the length of the very longest one. Is it possible ? Thank you.

[AddisonG]

Still waiting on this - "matchContentWidth" would be a much-appreciated feature.

[cibernox]

@AddisonG it's complicated. It would require to render things once, measure which one is the longest option and then resize the container again. Probably that should happen offscreen to avoid flickering. Its a complicated feature and probably outside of core, but I'm happy to assist if anyone wants to pursue it.