0

How to adjust the alignment of columns when the label overflows?

enter image description here

<div class="slds-grid slds-p-top_x-small slds-form_horizontal slds-form ">
                    <div class="slds-size_4-of-12 slds-p-horizontal--x-small" >
                            <label for="BillingCity" class="slds-text-title">Billing City</label>
                            <lightning:inputField fieldName="BillingCity" variant="label-hidden"/>
                    </div>
                    <div class="slds-size_2-of-12 slds-p-horizontal--x-small" >
                            <label for="BillingState" class="slds-text-title">Billing State/Province</label>
                            <lightning:inputField fieldName="BillingState" variant="label-hidden"/>
                     </div>
                     <div class="slds-size_4-of-12 slds-p-horizontal--x-small" >
                            <label for="ShippingCity" class="slds-text-title">Shipping City</label>
                            <lightning:inputField fieldName="ShippingCity" variant="label-hidden"/>
                     </div>
                     <div class="slds-size_2-of-12 slds-p-horizontal--x-small" >
                            <label for="ShippingState" class="slds-text-title">Shipping State/Province</label>
                            <lightning:inputField fieldName="ShippingState" variant="label-hidden"/>
                     </div>
                </div>
1

Not exactly sure on what is the problem you have with your code, one of them is you are using a deprecated class slds-p-horizontal--x-small that should be slds-p-horizontal_x-small (Few years ago Salesforce had replaced double dashes in classes with an underscore as it gave problems with code comments in HTML).

Using the SLDS classes for horizontal form in your own markup is nice but this can be achieved in a simpler way with the use of lightning:layout base component, here is an example:

<lightning:layout>
    <lightning:layoutItem size="4" padding="around-small">
        <label for="BillingCity" class="slds-text-title">Billing City</label>
        <lightning:inputField fieldName="BillingCity" variant="label-hidden"/>
    </lightning:layoutItem>
    <lightning:layoutItem size="2" padding="around-small">
        <label for="BillingState" class="slds-text-title">Billing State/Province</label>
        <lightning:inputField fieldName="BillingState" variant="label-hidden"/>
    </lightning:layoutItem>
    <lightning:layoutItem size="4" padding="around-small">
        <label for="ShippingCity" class="slds-text-title">Shipping City</label>
        <lightning:inputField fieldName="ShippingCity" variant="label-hidden"/>
    </lightning:layoutItem>
    <lightning:layoutItem size="2" padding="around-small">
        <label for="ShippingState" class="slds-text-title">Shipping State/Province</label>
        <lightning:inputField fieldName="ShippingState" variant="label-hidden"/>
    </lightning:layoutItem>
</lightning:layout>

enter image description here

| improve this answer | |
  • hi thank you so much for answering I tried doing the layout item but still the same the label still over flow – mayan Jul 5 at 1:28
  • @mayan: your example in question doesn't illustrate the problem properly, please share minimal code with which we can replicate the problem. – Raul Jul 5 at 16:24

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.