Apex Code Development You need to sign in to do that
Don't have an account?
chaitanya 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>
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>
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>
All Answers
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.
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
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>