function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SabrentSabrent 

Lightning Component Design alignment

<div class="slds-grid slds-grid_vertical">
        <lightning:card title="{!v.headerTitle}" iconName="standard:email">
            
            <lightning:layoutItem size="4" class="left-align">
                <ui:inputSelect label="User" class="dynamic" aura:id="dynamicInputSelect" change="{!c.onPicklistChange}"/>
            </lightning:layoutItem>
            <div>
            <lightning:layoutItem size="4" class="right-align">
                <lightning:button label="Email Previewer" onclick="{!c.previewEmail}"/>
            </lightning:layoutItem>    
            </div>
            <div class="slds-card__body ">
                <div class="slds-grid slds-grid_vertical slds-card__body_inner" > 
                    <aura:iteration var="e" items="{!v.campaignEmails}" >
    				<p>{!e}</p>
    				</aura:iteration>
                </div>
            </div>
                
        </lightning:card>
	</div>

User-added image

How can i aligh the picklist and button side by side ? 

Thanks
Raj VakatiRaj Vakati
try this
  
<div class="slds-grid slds-grid_vertical">
        <lightning:card title="{!v.headerTitle}" iconName="standard:email">
            
            <lightning:layoutItem size="4" class="left-align">
                <ui:inputSelect label="User" class="dynamic" aura:id="dynamicInputSelect" change="{!c.onPicklistChange}"/>
                    
            </lightning:layoutItem>
            <lightning:layoutItem size="4" class="right-align">
                <lightning:button label="Email Previewer" onclick="{!c.previewEmail}"/>
            </lightning:layoutItem>    
            <div class="slds-card__body ">
                <div class="slds-grid slds-grid_vertical slds-card__body_inner" > 
                    <aura:iteration var="e" items="{!v.campaignEmails}" >
                        <p>{!e}</p>
                    </aura:iteration>
                </div>
            </div>
            
        </lightning:card>
    </div>

 
Raj VakatiRaj Vakati
try this pls
  
<lightning:card title="{!v.headerTitle}" iconName="standard:email">
        <lightning:layout>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                 <ui:inputSelect label="User" class="dynamic" aura:id="dynamicInputSelect" change="{!c.onPicklistChange}">
                    <ui:inputSelectOption text="Any"/>
                    <ui:inputSelectOption text="Open" value="true"/>
                    <ui:inputSelectOption text="Closed"/>
                    <ui:inputSelectOption text="Closed Won"/>
                    <ui:inputSelectOption text="Prospecting"/>
                    <ui:inputSelectOption text="Qualification"/>
                    <ui:inputSelectOption text="Needs Analysis"/>
                    <ui:inputSelectOption text="Closed Lost"/>
                </ui:inputSelect>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                  <lightning:button label="Email Previewer" onclick="{!c.previewEmail}"/>
            </lightning:layoutItem>
                   </lightning:layout>
        <div class="slds-card__body ">
                <div class="slds-grid slds-grid_vertical slds-card__body_inner" > 
                    <aura:iteration var="e" items="{!v.campaignEmails}" >
                        <p>{!e}</p>
                    </aura:iteration>
                </div>
            </div>
        </lightning:card>

 
SabrentSabrent
Thanks @ Raj Vakati

I tried what you suggested, and this is the output. Notice how email previewer button is not aligned with the picklist. 
Any suggestions appreciated!!  

User-added image
Raj VakatiRaj Vakati
GIve me your code .. you can do one small trick ..  Add one <br/> before emal preview button 
SabrentSabrent
Much appreciated Raj !

Here's my code.  
<div class="slds-grid slds-grid_vertical">
        <lightning:card title="{!v.headerTitle}" iconName="standard:email">
         
           
                <lightning:layout >
                
                    <lightning:layoutItem flexibility="auto" padding="around-small">
                        <ui:inputSelect label="User" class="dynamic" aura:id="dynamicInputSelect" change="{!c.onPicklistChange}"/>
                    </lightning:layoutItem>
                    
                    <lightning:layoutItem flexibility="auto" padding="around-small">
                        <lightning:button label="Email Previewer" onclick="{!c.previewEmail}"/>
                    </lightning:layoutItem>    
                </lightning:layout>
                
            <div class="slds-card__body ">
                <div class="slds-grid slds-grid_vertical slds-card__body_inner" > 
                    <aura:iteration var="e" items="{!v.campaignEmails}" >
    				<p>{!e}</p>
    				</aura:iteration>
                </div>
            </div>
                
        </lightning:card>
	</div>