[SalesForce] How to Align Lightning Component Label and Fields

How to align lightning label and lightning input in 1 row? I can't seem to putll it off. Here's my current form. However, my goal is to make it look like this This is my lightning form code for the first image above:

<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
    <lightning:input aura:id="contactField" type="text" value="{!v.newContact.LastName}" Name="Last Name" label ="Last Name"/>
</div>
<div class="slds-col slds-size_1-of-2">
    <lightning:input aura:id="contactField" type="text" value="{!v.newContact.FirstName}" Name="First Name" label ="First Name"/>
</div>
<br/>
<div class="slds-col slds-size_1-of-2">
    <lightning:input aura:id="contactField" type="email" name="email" label="Email"  value="{!v.newContact.Email}" />
</div>

I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?

Best Answer

Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:

<div class="slds-form_horizontal slds-form slds-grid slds-wrap">
    <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="{!v.newContact.LastName}" Name="Last Name" label ="Last Name"/>
    <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="{!v.newContact.FirstName}" Name="First Name" label ="First Name"/>
    <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email"  value="{!v.newContact.Email}" />
</div>

Related Solutions

[SalesForce] How to add tooltips to lightning:input components

"fieldLevelHelp" attribute works for lightning:input component too even though it's not been documented. It's documented for lightning-input and aura components use LWC under the covers.

<lightning:input label="Custom Label" 
             value="Custom Text" 
             fieldLevelHelp="Help text goes here" />

You can also create your own field with custom rendering using the below code without the need for any CSS:

<lightning:layoutItem>
 <span class="slds-form-element">
     <label for="textInput" 
            class="slds-form-element__label slds-no-flex">
         Custom Label
     </label>
     <lightning:helptext content="{!v.fieldLevelHelp}" />
     <div class="slds-form-element__control slds-grow">
         <!--Custom rendered element -->
         <a id="textInput" 
            target="_blank" 
            href="{/lightning/r/'+v.recordId + '/view'}"> 
            Custom Link Label
         </a>
     </div>
</span>
</lightning:layoutItem>

[SalesForce] How to force inline form and label on mobile device

You can override the default class "slds-form--inline" you are using. This is the current class:

@media (min-width: 30em){
.slds-form--inline .slds-form-element, .slds-form--inline .slds-form-element__control, .slds-form--inline .slds-form-element__label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}
}

@media (min-width: 30em){
.slds-form--inline .slds-form-element {
    margin-right: .5rem;
}

}

As you can see, if the size of the window is smaller than 30em, the class is not applied anymore.

If you want to change it, you can override the min-width like this:

@media (min-width: 15em){
    .slds-form--inline .slds-form-element, .slds-form--inline .slds-form-element__control, .slds-form--inline .slds-form-element__label {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
    }
    }

    @media (min-width: 15em){
    .slds-form--inline .slds-form-element {
        margin-right: .5rem;
    }

    }

Related Topic