[SalesForce] Lightning:select size of biggest option

Is there a way to have a lightning:select auto sizing to the biggest of its option ?

<lightning:select>
   <option value="1">short name</option>
   <option value="2">longest name of options</option>
</lightning:select>

Best Answer

The problem is that the lightning:select lightning component includes a select input inside a container.

Here's the code automatically added:

<div class="slds-form-element">
   <label class="slds-form-element__label">
      <span class=""></span>
   </label>
   <div class="slds-form-element__control slds-grow">
      <div class="slds-select_container">
         <select class="slds-select">
            <option value="1">short name</option>
            <option value="2">longest name of options</option>
         </select>
      </div>
   </div>
</div>

The container with the class slds-select_container is displayed as a block which takes all the width available. So, you have to change this.

First, add a custom class to your input like this:

<lightning:select class="select-auto-width">

Now, in your component style, you have to add:

.THIS .select-auto-width > .slds-form-element__control > .slds-select_container{
    display: inline-block;
}