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
    Commented 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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .