-1

enter code hereenter image description here

Need to create design like this in screenshot. I am ready with the component but not sure what SLDS i can use to :

1) Showing Green Border top of each section 2) Display fields in 2 rows having 4 coloumns each.

Kindly suggest. I have added my component.

<aura:component  implements="force:lightningQuickAction,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes" access="global" >

  <aura:attribute name="Contact" type="Contact" default="{'sobjectType': 'Contact' }"/>
   <aura:attribute name="Contact1" type="Contact" default="{'sobjectType': 'Contact' }"/>
    <aura:attribute name="Contac2" type="Contact" default="{'sobjectType': 'Contact' }"/>
    <aura:attribute name="Contact3" type="Contact" default="{'sobjectType': 'Contact' }"/>
    <aura:attribute name="isDataSubmitted" type="boolean" default="false"></aura:attribute>

        <div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
          <div class="slds-form-element">

             <div class="slds-border_top"> 
                            <div class="slds-grid slds-gutters">
                                 <div class="slds-col slds-size_1-of-1">
                      <lightning:layout multipleRows="true">
                            <H1>Contact1#</H1>
                          <div class="slds-grid slds-wrap slds-grid--pull-padded">
                          <div class="slds-col--padded slds-size--1-of-4">
                              <div class="slds-size--1-of-4">
                                <lightning:input type="Contact" label="First Name" value="{!v.Contact.FirstName}" />
                                <lightning:input type="Contact" label="Last Name" value="{!v.Contact.LastName}" /> <br/>
                              </div>
                          </div>
                        </div>


                       <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Email" value="{!v.Contact.Email}" />
                          </lightning:layoutItem>
                     <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Department" value="{!v.Contact.Department}" />
                          </lightning:layoutItem>
                      <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Level" value="{!v.Contact.Level__c}" />
                          </lightning:layoutItem>
                      <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="AssistantName" value="{!v.Contact.AssistantName}" />
                          </lightning:layoutItem>
                       <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="LeadSource" value="{!v.Contact.LeadSource}" />
                          </lightning:layoutItem>
                          </lightning:layout>
                                      </div>
                                          </div>
                                                  </div>



                       <div class="slds-border_top">   
                      <lightning:layout multipleRows="true">
                            <H1>Contact2#</H1>

                            <lightning:layoutItem padding="around-large" size="12" smallDeviceSize="12" mediumDeviceSize="2">
                                <lightning:input type="Contact" label="First Name" value="{!v.Contact2.FirstName}" />
                         </lightning:layoutItem>


                          <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Last Name" value="{!v.Contact2.LastName}" />
                          </lightning:layoutItem>
                       <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Email" value="{!v.Contact2.Email}" />
                          </lightning:layoutItem>
                     <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Department" value="{!v.Contact2.Department}" />
                          </lightning:layoutItem>
                          </lightning:layout>
                            </div>




                       <div class="slds-border_top">   
                      <lightning:layout multipleRows="true">
                            <H1>Contact3#</H1>

                            <lightning:layoutItem padding="around-large" size="12" smallDeviceSize="12" mediumDeviceSize="2">
                                <lightning:input type="Contact" label="First Name" value="{!v.Contact3.FirstName}" />
                         </lightning:layoutItem>
                      <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Last Name" value="{!v.Contact3.LastName}" />
                          </lightning:layoutItem>
                       <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Email" value="{!v.Contact3.Email}" />
                          </lightning:layoutItem>
                     <lightning:layoutItem padding="around-large" size="2" smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Department" value="{!v.Contact3.Department}" />
                          </lightning:layoutItem>
                          </lightning:layout>
                            </div>




                       <div class="slds-border_top">   
                      <lightning:layout multipleRows="true">
                            <H1>Contact4#</H1>

                            <lightning:layoutItem padding="around-large" 
             size="12" smallDeviceSize="12" mediumDeviceSize="2">
                                <lightning:input type="Contact" label="First 
               Name" value="{!v.Contact4.FirstName}" />
                         </lightning:layoutItem>


                          <lightning:layoutItem padding="around-large" size="2" 
                  smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Last Name" value=" 
              {!v.Contact4.LastName}" />
                          </lightning:layoutItem>
                       <lightning:layoutItem padding="around-large" size="2" 
               smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Email" value=" 
                 {!v.Contact4.Email}" />
                          </lightning:layoutItem>
                     <lightning:layoutItem padding="around-large" size="2" 
                 smallDeviceSize="12" mediumDeviceSize="2">
                     <lightning:input type="Contact" label="Department" value=" 
                 {!v.Contact4.Department}" />
                          </lightning:layoutItem>
                          </lightning:layout>
                            </div>

              <lightning:layout multipleRows="true">
                         <lightning:layoutItem padding="around-large" size="2" 
                 smallDeviceSize="12" mediumDeviceSize="2">
                      <lightning:button variant="brand" label="Save All" 
                 title="Save All"  />  
                          </lightning:layoutItem>
                          </lightning:layout>
                </div>
      </div>
 </aura:component>
  • Please edit this post to show the community what you've tried and where you're stuck. See How to Ask. – David Reed Apr 17 at 2:36
  • @David I have added component i have created. I am not getting how can i display the inputfields in this format. like 2 rows and 4 coloumns – Suren Apr 17 at 2:43
2

The solution is in your lightning-layout-item(LWC) | lightning:layoutItem (Aura) size property. you have them all set to 12 which is the max. You will need to set them all to 3 to achieve 4 rows. You will also need to reduce your padding as well as this only takes up more space than is needed using the around-large.

<lightning:layoutItem padding="around-small" // small padding will add about 1rem around roughly
                      size="3"               // normal device, 1 column 3 columns remaining
                      smallDeviceSize="12">  // small device, 1 column full width (mobile)
   <lightning:input type="Contact" label="First Name" value="{!v.Contact2.FirstName}" />
</lightning:layoutItem>

as you adjust you may want to scale up or down the padding. or you can add a class attribute instead and use that for your lightning-input (LWC) | lightning:input (Aura)

<lightning:layoutItem size="3"               // normal device, 1 column 3 columns remaining
                      smallDeviceSize="12">  // small device, 1 column full width (mobile)
   <lightning:input type="Contact" 
                    label="First Name"
                    class="slds-m-around-x_small"   // use margin arouund your component instead
                    value="{!v.Contact2.FirstName}" />
</lightning:layoutItem>
| improve this answer | |
  • 1
    thanks it worked fine :) – Suren Apr 20 at 10:19

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.