Skip to main content The Trailblazer Community will be unavailable from 2/1/2025 to 2/2/2025. Please plan your activities accordingly.
Hi,

I am starting my salesforce lightning component framework superbadge and I have written the below code. I am using the component in a lightning app and using the preview for testing. Can you please let me know why the dropdown menu and buttons are not aligned properly.

Code

<aura:component >

    <aura:attribute name="attr_selectTypeBoat" type='String[]' default='All Types'/>

    <lightning:layout horizontalAlign="center">

            <lightning:layoutItem flexibility="auto" padding="around-small" >

                <lightning:select aura:id="selectTypeBoat" name="selectType" label='Please select'>

                    <aura:iteration items='{!v.attr_selectTypeBoat}' var='option'>

                        <option value='{!option}' text='{!option}' />

                    </aura:iteration>

                </lightning:select>

            </lightning:layoutItem>

            <lightning:layoutItem flexibility="auto" padding="around-small" >

                <lightning:button label="Search" variant="brand"/>

            </lightning:layoutItem>

            <lightning:layoutItem flexibility="auto" padding="around-small">

                <lightning:button label="New" variant="neutral"/>

            </lightning:layoutItem>

        </lightning:layout>

</aura:component>

Output

User-added image

Thanks

Vinny

 
2 answers
  1. Nov 25, 2018, 5:42 PM
    Hi Vinny,

    Add extends keyword in the application:​​​​​​​

    <aura:application extends="force:slds">

    <!-- customize your application here -->

    </aura:application>

    Hope this helps you!

    If my answer helps resolve your query, please mark it as the 'Best Answer' & upvote it to benefit others.

    Thanks

    Varaprasad

    Salesforce Freelance Consultant/Developer/Administrator

    @For Salesforce Project Support: varaprasad4sfdc@gmail.com

    Salesforce latest interview questions  :

    https://www.youtube.com/channel/UCOcam_Hb4KjeBdYJlJWV_ZA?sub_confirmation=1
  2. Nov 25, 2018, 6:05 PM
    The lightning application wnt inhertices the css by defaults .. 

    These are the two ways you can able to do it 

    1 . Extends your the Application with force.slds

     

    <aura:application extends="force:slds">

    <c:YOUTCMP/>

    </aura:application>

    2 . Use the Your component into the lightning experience page means include your component into the lightning experience .. 

     
0/9000