How to Align Lightning Component Label and Fields

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;







up vote
1
down vote

favorite












How to align lightning label and lightning input in 1 row? I can't seem to putll it off. enter image description hereHere's my current form. However, my goal is to make it look like this enter image description here This is my lightning form code for the first image above: 



<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
 <lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
</div>
<div class="slds-col slds-size_1-of-2">
 <lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
</div>
<br/>
<div class="slds-col slds-size_1-of-2">
 <lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
</div>




I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?






lightning-components







share|improve this question



























    up vote
    1
    down vote

    favorite












    How to align lightning label and lightning input in 1 row? I can't seem to putll it off. enter image description hereHere's my current form. However, my goal is to make it look like this enter image description here This is my lightning form code for the first image above: 



    <div class="slds-grid">
    <div class="slds-col slds-size_1-of-2">
     <lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
    </div>
    <div class="slds-col slds-size_1-of-2">
     <lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
    </div>
    <br/>
    <div class="slds-col slds-size_1-of-2">
     <lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
    </div>




    I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?






    lightning-components







    share|improve this question























      up vote
      1
      down vote

      favorite









      up vote
      1
      down vote

      favorite











      How to align lightning label and lightning input in 1 row? I can't seem to putll it off. enter image description hereHere's my current form. However, my goal is to make it look like this enter image description here This is my lightning form code for the first image above: 



      <div class="slds-grid">
      <div class="slds-col slds-size_1-of-2">
       <lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
      </div>
      <div class="slds-col slds-size_1-of-2">
       <lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
      </div>
      <br/>
      <div class="slds-col slds-size_1-of-2">
       <lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
      </div>




      I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?






      lightning-components







      share|improve this question













      How to align lightning label and lightning input in 1 row? I can't seem to putll it off. enter image description hereHere's my current form. However, my goal is to make it look like this enter image description here This is my lightning form code for the first image above: 



      <div class="slds-grid">
      <div class="slds-col slds-size_1-of-2">
       <lightning:input aura:id="contactField" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
      </div>
      <div class="slds-col slds-size_1-of-2">
       <lightning:input aura:id="contactField" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
      </div>
      <br/>
      <div class="slds-col slds-size_1-of-2">
       <lightning:input aura:id="contactField" type="email" name="email" label="Email" value="!v.newContact.Email" />
      </div>




      I'm trying to make it look like the second picture. However, for the second picture, I used the label tag which is separate from the input tag. It's never hard to make the input field and the label appear in 1 line where the input box has similar alignment with the input box below it. But using the lightning:input with the label together in it, would it be possible to align them in 1 row?






      lightning-components




      lightning-components






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 31 mins ago









      cookie

      578




      578




















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          2
          down vote













          Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:



          <div class="slds-form_horizontal slds-form slds-grid slds-wrap">
           <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
           <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
           <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
          </div>





          share|improve this answer




















            Your Answer







            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "459"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            convertImagesToLinks: false,
            noModals: false,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













             

            draft saved


            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f235094%2fhow-to-align-lightning-component-label-and-fields%23new-answer', 'question_page');

            );

            Post as a guest

















            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            2
            down vote













            Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:



            <div class="slds-form_horizontal slds-form slds-grid slds-wrap">
             <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
             <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
             <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
            </div>





            share|improve this answer
























              up vote
              2
              down vote













              Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:



              <div class="slds-form_horizontal slds-form slds-grid slds-wrap">
               <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
               <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
               <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
              </div>





              share|improve this answer






















                up vote
                2
                down vote










                up vote
                2
                down vote









                Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:



                <div class="slds-form_horizontal slds-form slds-grid slds-wrap">
                 <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
                 <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
                 <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
                </div>





                share|improve this answer












                Yes, simply place your elements in a horizontal form, and give the elements the correct size. Here's a modified example of your code:



                <div class="slds-form_horizontal slds-form slds-grid slds-wrap">
                 <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.LastName" Name="Last Name" label ="Last Name"/>
                 <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="text" value="!v.newContact.FirstName" Name="First Name" label ="First Name"/>
                 <lightning:input aura:id="contactField" class="slds-size_1-of-2" type="email" name="email" label="Email" value="!v.newContact.Email" />
                </div>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 17 mins ago









                sfdcfox

                231k10178394




                231k10178394



























                     

                    draft saved


                    draft discarded















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f235094%2fhow-to-align-lightning-component-label-and-fields%23new-answer', 'question_page');

                    );

                    Post as a guest
































































                    Comments

                    Post a Comment

                    Popular posts from this blog

                    What does second last employer means? [closed]

                    Image
                    Clash Royale CLAN TAG #URR8PPP .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote -3 down vote favorite Say, for example I have worked in the following companies, Company A => 2010 - 2011 Company B => 2011 - 2012 Company C => 2012 - Till Date Company D => Have offer Now assume Company D is asking to submit documents from my second last employer. So from the list of companies given, which company would be qualified as second last employer? software-industry employer share | improve this question asked Aug 10 '14 at 5:16 Rajaprabhu Aravindasamy 559 1 6 13 closed as off-topic by Jim G., jmort253 ♦ Aug 11 '14 at 1:58 This question appears to be off-topic. The users who voted to close gave this specific reason: "Questions seeking advice on company-specific regulations, agreements, or policies should be directed to your manager or HR department. Questions that address...
                    Read more

                    Installing NextGIS Connect into QGIS 3?

                    Image
                    Clash Royale CLAN TAG #URR8PPP .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote 1 down vote favorite Just acquired free version of NEXTGIS and trying to install the plugin for QGIS. It tells me it was not designed for version 3 of QGIS. How do I set up the QGIS-NEXTGIS interface then? qgis qgis-plugins nextgis share | improve this question edited 3 hours ago PolyGeo ♦ 51.9k 17 77 233 asked 4 hours ago IanGS 16 4 New contributor IanGS is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. add a comment  |  up vote 1 down vote favorite Just acquired free version of NEXTGIS and trying to install the plugin for QGIS. It tells me it was not designed for version 3 of QGIS. How do I set up the QGIS-NEXTGIS interface then? qgis qgis-plugin...
                    Read more

                    One-line joke

                    A one-liner is a joke that is delivered in a single line. A good one-liner is said to be pithy - concise and meaningful. [1] Comedians and actors use this comedic method as part of their act, e.g. Jimmy Carr, Tommy Cooper, Rodney Dangerfield, Norm Macdonald, Ken Dodd, Stewart Francis, Zach Galifianakis, Mitch Hedberg, Anthony Jeselnik, Milton Jones, Shappi Khorsandi, Jay London, Mark Linn-Baker, Demetri Martin, Groucho Marx, Dan Mintz, Emo Philips, Tim Vine, Steven Wright and Henny Youngman and Arnold Schwarzenegger. [ citation needed ] Many fictional characters are also known to deliver one-liners, including James Bond, who usually includes pithy and laconic quips after disposing of a villain. [ citation needed ] Examples "A baby seal walks into a club." "A dyslexic man walks into a bra." (Anonymous) "There are three types of people, those who can count and those who can't." "Venison's dear, isn't it?" (Jimmy Carr) "An escala...
                    Read more