1

I would like my form element to appear side by side instead of vertically one below another. For example I have an input text and 2 buttons. I want the input text and button appear in one line. I tried using <form class="slds-form slds-form_horizontal"> but that does not solve it. My component:

<aura:component >   
<!-- FORM -->
    <lightning:layout horizontalAlign="center">
        <lightning:layoutItem>
        <form class="slds-form slds-form_horizontal">
        <lightning:input aura:id="Aform" label="Input Text"  
                         name="inouttxt"/>     
        <lightning:button label="Search" 
                          variant="brand"
                          class="slds-button"
                          onclick="{!c.clickSearch}"/>
         <lightning:button label="New" 
                          variant="white"
                          onclick="{!c.clickNew}"/>                  
        </form>
        </lightning:layoutItem>
    </lightning:layout> 
</aura:component>

How it appears in the app:

enter image description here

Do I use any <Div> tag or any specific slds element to make them appear in the same line. Any suggestion?

4

Here's a modified version that's closer to what you're looking for:

<lightning:layout horizontalAlign="center">
    <lightning:layoutItem size="6">
            <lightning:input aura:id="Aform" label="Input Text"  
                             name="inouttxt"/>     
    </lightning:layoutItem>
    <lightning:layoutItem size="3">
            <lightning:button label="Search" 
                              variant="brand"
                              class="slds-button"
                              onclick="{!c.clickSearch}"/>
    </lightning:layoutItem>
    <lightning:layoutItem size="3">
            <lightning:button label="New" 
                              variant="white"
                              onclick="{!c.clickNew}"/>                  
    </lightning:layoutItem>
</lightning:layout> 

Each layout item forms a "cell", which you specify with "size", where "size" is a fraction of 12 elements (so size="6" is 6/12 or 1/2 the area).

Alternatively, you might want something closer to this:

<lightning:layout horizontalAlign="center">
    <lightning:layoutItem size="8">
            <lightning:input aura:id="Aform" label="Input Text"  
                             name="inouttxt"/>     
    </lightning:layoutItem>
    <lightning:layoutItem size="4">
            <lightning:button label="Search" 
                              variant="brand"
                              class="slds-button"
                              onclick="{!c.clickSearch}"/>
            <lightning:button label="New" 
                              variant="white"
                              onclick="{!c.clickNew}"/>                  
    </lightning:layoutItem>
</lightning:layout> 
  • Great! My assumption was to use form tag to create input field and have a button like HTML form. But from what you are saying I see the a form tag is not required always when taking user input and doing something with that onclick of a button. – SfdcBat Dec 7 '17 at 18:03
  • 1
    @SfdcBat Lightning is a SPA (Single Page Application), so forms are not strictly required. If you're using SLDS in a random web page (e.g. from lightningdesignsystem.com), you may or may not need forms, as required, but within LEX or a Lightning Application, they're not required. – sfdcfox Dec 7 '17 at 18:05
  • I was able to get everything in one line but is it possible to bring the label of input text and the input box side by side? They appear one below the other. – SfdcBat Dec 7 '17 at 18:29
  • 1
    @SfdcBat lightning:* elements are designed to be used in SLDS. That means accepting how SLDS does things. You can't really beat it in to submission, yet still call it SLDS. If you want to do your own thing, you'll have to ditch the lightning:* elements and go with basic HTML or the ui:* elements. If you do want to use SLDS, you need to accept its' design philosophy. The labels being above are meant to provide a suitable experience on both desktop and mobile devices. – sfdcfox Dec 7 '17 at 18:42

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.