0

Below is the screenshot of my HTML it looks very ugly(I am not a front end guy) Which SLDS design should i use to make it look good?

    <template>   
  <div class="slds-theme_default" >
    <div class="slds-grid slds-m-top--large ">
      <div class="slds-col slds-p-horizontal_medium slds-size_1-of-2">
        <div class="slds-grid slds-wrap slds-text-align_center custom-container">
                    Customer
                    <c-lookup sobject-name="Account"
                    title="Name"
                    subtitle="AccountNumber"
                    onselected={handleAccountLookup}
                    placeholder="Search Salon..."
                    icon-name="standard:account">
                    </c-lookup>
                  

          <div class="slds-size_1-of-2 ">
                    Division
                    <select class="slds-select">
                        <template for:each={divisionrecords} for:item="division">
                            <option key={division.Division__c} value={division.Division__c}>{division.Division__c}</option>
                        </template>
                    </select>
              </div>


            <div class="slds-size_1-of-2">   
                  Bill To
                  <select class="slds-select">
                      <template for:each={billtobillrecords} for:item="billtobill">
                          <option key={billtobill.Name} value={billtobill.Name}>{billtobill.Name}</option>
                      </template>
                  </select> 
          </div>  

            <div class="slds-size_1-of-2 ">   
                  Ship To
                  <select class="slds-select">
                      <template for:each={shiptorecords} for:item="shipto">
                          <option key={shipto.Name} value={shipto.Name}>{shipto.Name}</option>
                      </template>
                  </select>
             </div>   

             <div class="slds-size_1-of-2 ">  
                Payer
                <select class="slds-select">
                    <template for:each={payerrecords} for:item="payer">
                        <option key={payer.Name} value={payer.Name}>{payer.Name}</option>
                    </template>
                </select>
              </div>

              <div class="slds-size_1-of-2 ">
                Order Type
                <select class="slds-select" name = "optionSelect" >
                  <option value="Normal Order">Normal Order</option>
              </select>         
            </div>
            
          </div>
     </div>
     </div> 
  
   </div> 
</template>

enter image description here

Thansk in Advance

2
  • Is this for LWC OSS (open source) or a component in Salesforce? – sfdcfox Dec 1 '20 at 4:50
  • Its for our custom component @sfdcfox – nano Dec 1 '20 at 4:58
0

What you're missing is that you need to use a SLDS form. A form is used to provide all the proper alignment for multiple input fields. There is a lot of missing elements and classes, which is why it looks bad. Please refer to the documentation for form elements. I won't fix all your code, but here's an example using Division. Your form starts out with:

                <div class="slds-form" role="list">

And then you build the row:

                    <div class="slds-form__row">

And then the form element:

                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element slds-form-element_horizontal slds-is-editing">
                                <label class="slds-form-element__label" for="divisionSelect">Division</label>
                                <div class="slds-form-element__control">
                                    <div class="slds-form-element__control">

And finally the select-specific code:

                                        <div class="slds-select_container">
                                            <select class="slds-select" id="divisionSelect">
                                                <template for:each= {divisionrecords} for:item="division">
                                                    <option key= {division.Division__c} value= {division.Division__c}>{division.Division__c}</option>
                                                </template>
                                            </select>
                                        </div>

Yes, this is a lot of work. However, if you build some more templates/components, you'll find that this can be easily constructed in a modular design, which is one of the design goals of both SLDS and LWC.

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.