+ Start a Discussion
chaitanya motupalli 17chaitanya motupalli 17 

LWC button and Combo box vertical alignment issue

Hi 
Could you please help in vertical alignment of combobox and new button. they both need to be in the same line.

Here is my code i have used to develop this
<template>
    <lightning-card>
        <lightning-layout horizontal-align="center" vertical-align="end" class="slds-form slds-form_horizontal">
            <lightning-layout-item size="4">
                <lightning-combobox placeholder="All Types" options={cartypesarry} value={selectedId}
                    onchange={comboOnchange}></lightning-combobox>
            </lightning-layout-item>
            <lightning-layout-item size="4">
                <lightning-button label="New" onclick={newButtonHandler}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>


Alignment
Best Answer chosen by chaitanya motupalli 17
chaitanya motupalli 17chaitanya motupalli 17
I found how to align both of them 
I used SLDS styles padding and margin.
Modified Code is

<template>
    <lightning-card>
        <lightning-layout horizontal-align="center" vertical-align="end">
            <div class="slds-var-m-top_large slds-var-p-right_medium">
                <lightning-layout-item size="4">
                    <lightning-combobox placeholder="All Types" options={cartypesarry} value={selectedId}
                        onchange={comboOnchange}></lightning-combobox>
                </lightning-layout-item>
            </div>
           
            <lightning-layout-item size="4">
                <lightning-button label="New" onclick={newButtonHandler}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

final look

All Answers

AbhishekAbhishek (Salesforce Developers) 
https://salesforce.stackexchange.com/questions/307511/lwc-combobox-not-aligning-properly-inside-a-lightning-layout-item

Try the method suggested in the above developer org.

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.

Thanks.
chaitanya motupalli 13chaitanya motupalli 13
Hi Abhishek,

I did not find any solution from the link you have provided. could you please try once your end with Combobox and button in the same row
please paste that sample code here so that I can use it.

Thanks for your quick reply
chaitanya motupalli 17chaitanya motupalli 17
I found how to align both of them 
I used SLDS styles padding and margin.
Modified Code is

<template>
    <lightning-card>
        <lightning-layout horizontal-align="center" vertical-align="end">
            <div class="slds-var-m-top_large slds-var-p-right_medium">
                <lightning-layout-item size="4">
                    <lightning-combobox placeholder="All Types" options={cartypesarry} value={selectedId}
                        onchange={comboOnchange}></lightning-combobox>
                </lightning-layout-item>
            </div>
           
            <lightning-layout-item size="4">
                <lightning-button label="New" onclick={newButtonHandler}></lightning-button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

final look
This was selected as the best answer