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
meghna nmeghna n 

align lightning:select with text

I have a piece of code inside by lightning component as follows:

<lightning:card title="Advanced Provider Search">
         <lightning:layout multipleRows="true">
               <lightning:layoutItem size="3" padding="around-small">
                    <span>Network ID</span><lightning:select name="select1" label="">
                                                    <option value="1">one</option>
                                                 <option value="2">two</option>
                                                    <option value="3">three</option>
                    </lightning:select>
</lightning:layoutItem>
</lightning:layout>
</lightning:card>

I want to the output as follows

At present when I preview the page the output is as follows

Network ID
<dropdnown List>

But I need the text and the dropdownlist to be aligned in the same line as follows.

Network ID : < dropdownList>

Please tell me how I can achieve this.

thanks
meghna
Best Answer chosen by meghna n
Khan AnasKhan Anas (Salesforce Developers) 
Hi Meghna,

Greetings to you!

You can use label attribute of lightning:select component. By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.
  
<aura:component >
    
    <lightning:card title="Advanced Provider Search">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem size="3" padding="around-small">
                <div class="slds-form_horizontal">
                    <lightning:select name="select1" label="Network Id : ">
                        <option value="1">one</option>
                        <option value="2">two</option>
                        <option value="3">three</option>
                    </lightning:select>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>
</aura:component>

Please refer to the below links which might help you further with the above requirement.

http://www.lightningdesignsystem.com/components/form-element/#Horizontal

https://www.lightningdesignsystem.com/utilities/name-value-list/#content

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Meghna,

Greetings to you!

You can use label attribute of lightning:select component. By placing the <lightning:select> in a horizontal form, it will transform the labels to the left.
  
<aura:component >
    
    <lightning:card title="Advanced Provider Search">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem size="3" padding="around-small">
                <div class="slds-form_horizontal">
                    <lightning:select name="select1" label="Network Id : ">
                        <option value="1">one</option>
                        <option value="2">two</option>
                        <option value="3">three</option>
                    </lightning:select>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>
</aura:component>

Please refer to the below links which might help you further with the above requirement.

http://www.lightningdesignsystem.com/components/form-element/#Horizontal

https://www.lightningdesignsystem.com/utilities/name-value-list/#content

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
meghna nmeghna n
Hi khan

This worked. Thanks for your post.

meghna