0

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

4
  • Your sample code doesn't illustrate the problem, Do you have two lightning:recordEditForm side by side? How is the form two columned?
    – Raul
    Jun 12, 2020 at 17:37
  • The problem is not with my code, the problem is that slds-form_horizontal has been deprecated yet I can't find another way to trip the whitespace on the fields without using it. I am asking for a direct substitution for slds-form_horizontal that behaves the same way.
    – protivakid
    Jun 14, 2020 at 13:12
  • I don't remember exactly on how horizontal form CSS used to behave as there are no example online or in SLDS docs. If I understand correctly, you want to have two column layout where inputs are aligned next to each other in a recordEditForm?
    – Raul
    Jun 14, 2020 at 14:59
  • Correct, it can even be a single column, I just need a way to stack the fields as seen on the left with the padding trimmed. The two column example was just to show with or without using slds-form_horizontal.
    – protivakid
    Jun 15, 2020 at 15:30

1 Answer 1

0

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.

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.