2

I've tried a few things and no matter what I do I cannot get the lightning inline label to align to the right instead of the left. I would like the First Name and Last Name label to align to the right instead of the left.

enter image description here

<div class="slds-box">
  <div class="slds-grid slds-wrap">
    <div class="slds-col slds-size_1-of-2">
      <lightning:input label="First Name:" type="text" value="{!ct.FirstName}" variant="label-inline"/>
    </div>
    <div class="slds-col slds-size_1-of-2">
      <lightning:input label="Last Name:" type="text" value="{!ct.LastName}" variant="label-inline"/>
    </div>
    <br/>
  </div>
</div>

How about font-weight, color, font-size, label width? Is any of that customizable? Lightning seems to make these type of cosmetic changes very difficult.

2
  • That's an unusual requirement and not possible by default with base component, you need to hide the input label with variant="hidden" and add your own label in html after the input.
    – Raul
    Commented Aug 30, 2022 at 18:46
  • It's not an unusual requirement. Look at almost any Visualforce page. They're aligned right by default, which is more visually appealing, and consistency is important in orgs with both frameworks at play.
    – isherwood
    Commented Jul 18 at 15:55

1 Answer 1

1

Ok, after playing around, I tried using a grid with separate labels and label hidden inputs.

Try this:

<div class="slds-box">
  <div class="slds-grid slds-wrap">
    <div class="slds-col slds-size_1-of-2">

      <div class="slds-form-element ">
        <div class="slds-grid">
          <div class="slds-col slds-size_1-of-3">
            <div class="slds-form-element__label" style="text-align: right; width: 100%; margin-top: 0.25rem;">Text Input</div>
          </div>
          <div class="slds-col slds-size_2-of-3">
            <lightning-input label="First Name:" type="text" value="test" variant="label-hidden"></lightning-input>
          </div>
        </div>
      </div>

    </div>
    <div class="slds-col slds-size_1-of-2">
    
      <div class="slds-form-element ">
        <div class="slds-grid">
          <div class="slds-col slds-size_1-of-3">
            <div class="slds-form-element__label" style="text-align: right; width: 100%; margin-top: 0.25rem;">Text Input</div>
          </div>
          <div class="slds-col slds-size_2-of-3">
            <lightning-input label="First Name:" type="text" value="test" variant="label-hidden"></lightning-input>
          </div>
        </div>
      </div>

    </div>
    <br/>
  </div>
</div>
0

You must log in to answer this question.

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