3
<lightning:select name="SelectOrNot" value="{!v.selectField}" label="Select One" >
    <aura:iteration items="{!v.TheOptions}" var="po">
     <option value="{!po}">{!po}</option>
    </aura:iteration>
</lightning:select>

When I try to use standard lightning tag <lightning:select> it displays label on the top .How to make it on the left.

1
  • I presume you meant "on the left" in both the title and question, so I have edited it as such. If this is not correct, please feel free to edit your question.
    – sfdcfox
    Oct 26, 2018 at 4:05

2 Answers 2

10

By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.

<div class="slds-form_horizontal">
    <lightning:select name="SelectOrNot" value="{!v.selectField}" label="Select One" >
        <aura:iteration items="{!v.TheOptions}" var="po">
         <option value="{!po}">{!po}</option>
        </aura:iteration>
    </lightning:select>
</div>
0
5

Wrap it in a div and apply the "slds-form_horizontal" class like so:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
  <lightning:card title="Select Example" iconName="standard:default" class="slds-size_1-of-4">
    <div class="slds-form slds-form_horizontal slds-p-around_medium">
      <lightning:select label="Name">
        <option value="test">Premium</option>
      </lightning:select>
      <lightning:select label="Color">
        <option value="test">Space Gray</option>
      </lightning:select>
      <lightning:select label="Size">
        <option value="test">X-Large</option>
      </lightning:select>
      <lightning:select label="Quantity">
        <option value="test">10</option>
      </lightning:select>
      <lightning:select label="Weight">
        <option value="test">10g</option>
      </lightning:select>
      <lightning:select label="Material">
        <option value="test">Alumninum</option>
      </lightning:select>
    </div>
  </lightning:card>
</aura:component>

This is how the example above renders as of Winter '19: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.