function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ChrisYazChrisYaz 

Trim whitespace between fields in lightning:recordEditForm with slds-form_horizontal deprecated?

I slimmed down my code to better illustrate the issue. I have a simple lightning:recordEditForm with lightning:inputField(s) inside. By default these fields pad themselves with a lot of vertical whitespace. The solution I had been using was to wrap them using "slds-form_horizontal" so that they stack on top of one another. The problem is that according to the [design docs][1] this was deprecated. I tried to use the newer "slds-form-element_horizontal" but the behavior was not the same.

What can I use in place of slds-form_horizontal to better trim vertical whitespace for the fields in my component?

Here is a small sample of my code: 
<div class="slds-form_horizontal">
     <lightning:recordEditForm  objectApiName="Account">
      <lightning:inputField fieldName="Name"/>
      <lightning:inputField fieldName="CurrencyIsoCode"/>
      <lightning:inputField fieldName="AccountNumber"/>                            
      <lightning:inputField fieldName="OwnerId"/>                                            
     </lightning:recordEditForm>
    </div>
On the left I use slds-form_horizontal, on the right I use density="compact" 
fields

 
David Zhu 🔥David Zhu 🔥
CSS class slds-form_horizontal just puts the label left aligned to the control. It does not control the spacing.
In my appliation, <lightning:recordEditForm> component without slds-form_horizontal has the normal vertical spacing just like your left screenshot.
Are there other css classes on top of <lighting?reocrdEditForm>?
ChrisYazChrisYaz
Just want to circle back and say that I figured out the issue. This component was part of a Flow in salesforce that was embedded into another Lightning Component. That component had the following CSS:

    .THIS .slds-form-element{
        padding-top: .70vh;
        padding-bottom: .70vh;
    }

This was overriding density="compact" and once removed the result was expected. Hopefully this will help someone reading down the road.