1

We've got a custom lightning component displaying a form in a page in a Community. It has two fields: a number and a text area.

There are several visual problems that make this form look awkward:

There is a gray border around each field, but they butt up against each other without being flush, and the rounded corners look awkward. The submit button doesn't have a box around it, so looks separate from the form. And one field sticks out beyond the border. And the first field is almost flush with the bottom of its containing box, while the second has some padding.

enter image description here

I know that I could fiddle w/ the CSS in order to tweak this to how I want it to look, but I'm surprised that this is the default. Other examples I've seen posted don't look like this. Is there something I need to fix in my markup? Or is this an artifact of embedding the form in a Community page?

We had this initially as ui:input elements instead of of lightning: elements. And it looked better, no borders etc. But seems that using lightning elements is what's recommended, so we'd rather not go back to that.

Here's the relevant markup:

   <aura:if isTrue="{!v.showForm}">
        <div class="slds-p-top--medium">
            <form class="slds-form-stacked">
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <lightning:input aura:id="ActNumber" label="Number in Party" type="number"
                                      class="slds-input"

                                      value="{!v.theAct.Number_in_Party__c}"
                                      required="true"
                                      disabled="{!not(empty(v.msg))}"/>
                    </div>
                </div>
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                    <lightning:textarea aura:id="ActDesc" label="Notes/Special Requests"
                                  class="slds-input"

                                  value="{!v.theAct.Volunteer_Notes__c}"
                                  required="false"
                                  disabled="{!not(empty(v.msg))}"/>
                    </div>
                </div>
                <aura:if isTrue="{!(empty(v.msg))}">
                    <ui:button label="Sign Me Up" press="{!c.signUp}" aura:id="signUpButton" disabled="{!not(empty(v.msg))}" />
                </aura:if>
            </form>
        </div>
    </aura:if>

Thanks much!

1

lightning components from this namespace have SLDS embeded within them, which means that when you put these components within an SLDS template + the lightning component, it is rendering a new slds form within your existing slds form template, so the slds-form-elements stack up resulting in this behavior. you have 2- options,

  • remove form elements from your SLDS template, since they are rendered with the lighting:whatever component
  • add padding around your input-form element: slds-p-around_medium

here is a markup sample of a rendered lightning input component:

<div class="slds-form-element slds-input slds-p-around_medium is-required slds-has-error lightningInput" data-aura-rendered-by="44:0" data-aura-class="lightningInput">
    <label class="slds-form-element__label slds-no-flex" for="42:0" data-aura-rendered-by="46:0">
        <abbr class="slds-required" title="required" data-aura-rendered-by="48:0">*</abbr>
            <span class="" data-aura-rendered-by="50:0">Number in Party</span>
    </label>
    <div class="slds-form-element__control slds-grow" data-aura-rendered-by="52:0">
        <input class="slds-input" type="number" id="42:0" style="position: absolute; opacity: 1;" data-aura-rendered-by="53:0" required="" aria-describedby="42:0-message">
            <span class="slds-input" aria-hidden="true" data-aura-rendered-by="55:0"></span><!--render facet: 56:0--></div><!--render facet: 57:0-->
<!--render facet: 58:0--><!--render facet: 59:0--><!--render facet: 60:0--><!--render facet: 61:0-->
                <div class="slds-form-element__help" role="alert" id="42:0-message" data-aura-rendered-by="68:0">Complete this field</div>
                </div>

notice the already embeded slds-form-element's, this is why your layout is all stacked up

  • OK, thanks. I think I understand, but am somewhat new to SLDS. When you say "remove form elements from your SLDS template", you mean just remove the SLDS classes from my markup? – mscholtz Feb 23 '18 at 4:25
  • yup (or even part of your markup, which essentially creates duplicate nodes – glls Mar 9 '18 at 4:22
  • This ended up doing the trick! – mscholtz Apr 24 '18 at 22:51

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.