-2

I'am very new to salesforce Lightning design system(slds). I have used slds-grid in my Lighthing componnet.

I need to achieve image in following format:

enter image description here

But actually its appearing like this:

enter image description here

  I added on <br/> tag.So now its appearing like below image

enter image description here

Question: 1.How Can I avoid break tag here

2.How to Achieve image in following format

enter image description here

   <div class="slds-grid slds-gutters">
    <div class="slds-col">
        <span>
       <ui:inputSelect aura:id="Lob" value="{!v.displayComparison.LOB__c}"  label="LOB" >
                <aura:iteration items="{!v.LOB}" var="item">
                    <ui:inputSelectOption label="{!item.label}" text="{!item.value}" value="{!v.displayComparison.LOB__c==item.label}"  />
                </aura:iteration>
            </ui:inputSelect>    

        </span>
    </div>

    <div class="slds-col">
        <span>

            <ui:inputSelect aura:id="BuisnessType" value="{!v.displayComparison.Business_Type__c}"  label="Buisness Type" >

                <aura:iteration items="{!v.BusinessType}" var="item">                          
                    <ui:inputSelectOption label="{!item.label}" text="{!item.value}"  value="{!v.displayComparison.Business_Type__c==item.value}"  />
                </aura:iteration>

            </ui:inputSelect>   

        </span>
    </div>
</div> 
<br/>               <!-- Break tag added here -->
<!--presnted premium and sold -->

<div class="slds-grid slds-gutters">
    <div class="slds-col">
        <span>
            <ui:inputText class="PresentedPremium" aura:id="PresentedPremium" label="Presented Premium" value="{!v.displayComparison.Presented_Premium__c}" />
        </span>
    </div>
    <div class="slds-col">
        <span>
            <ui:inputText class="SoldPremium" aura:id="SoldPremium" label=" Sold Premium" value="{!v.displayComparison.Sold_Premium__c}" />
        </span>
    </div>
</div>
|improve this question
2

ui:* elements don't have slds applied, so you need to use the lightning:* versions instead. You will also need to wrap your grids in a "slds form" for proper effect. Here's a mock up of a horizontal-label form:

<aura:application extends="force:slds">
    <div class="slds-form slds-form_horizontal">
        <div class="slds-grid slds-gutters_small">
            <lightning:input label="Field 1" class="slds-col" />
            <lightning:input label="Field 2" class="slds-col" />
        </div>
        <div class="slds-grid slds-gutters_small">
            <lightning:input label="Field 3" class="slds-col" />
            <lightning:input label="Field 4" class="slds-col" />
        </div>
    </div>
</aura:application>
|improve this answer
1

There are several functionalities that can help you achieve this.

  • Wrapping your component(s) in a grid (which you are already doing, :thumbs up:)
  • Using slds-col (another :thumbs up:)
  • Leverage slds-size_x-of-x to control your column sizes
  • use Padding (adds some space in bettween your elements)
  • Use Margins if you need your elements and x distance from your page margin/border

The above should provide you with what you need for achieving the required CSS fucntionality you described.

If the above is applied properly, no break tags should eb necessary.

|improve this answer
1
<div class="slds-grid slds-gutters">
        <div class="slds-col">
            <span>
                <div class="slds-form slds-form_horizontal">
                    <div class="slds-form-element">
                        <ui:inputSelect aura:id="Lob" value="{!v.displayComparison.LOB__c}"  label="LOB" >
                            <aura:iteration items="{!v.LOB}" var="item">
                                <ui:inputSelectOption label="{!item.label}" text="{!item.value}" value="{!v.displayComparison.LOB__c==item.label}"  />
                            </aura:iteration>
                        </ui:inputSelect>    
                    </div>
                </div>
            </span>
        </div>

You missed:-

<div class="slds-form slds-form_horizontal">
                        <div class="slds-form-element">
                             ......
                              ......
                        </div>
</div>

Note:-

To horizontally align a and , use the slds-form_horizontal class on the wrapper around the form. A slds-form-element__label takes up 33% of the width, and the slds-form-element__control uses the remaining 66%.

Reference:-

|improve this answer

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.