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
vinny rvinny r 

Salesforce lightning component ignoring the styling

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
 
Best Answer chosen by vinny r
v varaprasadv varaprasad
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

All Answers

v varaprasadv varaprasad
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
This was selected as the best answer
Raj VakatiRaj Vakati
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 ..