2

I'm trying to display three components in one horizontal line. The components are:

  1. A picklist - ComboBox.
  2. An input text field.
  3. A button.

I have an issue where the ComboBox label is on the same line as the other components, but the selection dropdown is not.

I tried putting them inside a grid and playing with the columns and alignments, but I haven't found a solution yet.

This is my code:

 <div class="slds-grid slds-wrap slds-align-top">
                <div class="SelectedOptions slds-col slds-size_1-of-4 slds-m-right_xx-small">
                    <div class="slds-form-element">
                        <lightning-combobox
                                name="asset"
                                label="Select type"
                                value={optionSelected}
                                options={lookupOptions}
                                onchange={handleChange}>
                        </lightning-combobox>
                    </div>
                </div>
                <div class="SelectedText slds-col slds-size_1-of-4 slds-m-right_xx-small">
                    <div class="slds-form-element__control">
                        <input type="text" id="text-input-id-47" placeholder="A placeHolder" required="" class="slds-input" />
                    </div>
                </div>
                <div class="slds-col slds-size_1-of-4 slds-m-right_xx-small">
                    <lightning-button label="Click Me" variant="brand-outline" onclick={handleClick}></lightning-button>
                </div>
            </div>

And this is what it displayed:

enter image description here

Many thanks.

1 Answer 1

2

This issue is seen since combobox label is aligned with the remaining elements.

To align the combobox with the remaining elements , we need to use slds-m-top_large for the other elements.

Please try below markup where slds-m-top_large class is applied to textbox and button :

<div class="slds-grid slds-wrap slds-align-top">
   <div class="SelectedOptions slds-col slds-size_1-of-4 slds-m-right_xx-small">
     <div class="slds-form-element">
       <lightning-combobox name="asset" label="Select type" value={optionSelected} options={lookupOptions} onchange={handleChange}></lightning-combobox>
     </div>
   </div>
   <div class="SelectedText slds-col slds-size_1-of-4 slds-m-right_xx-small">
     <div class="slds-form-element__control slds-m-top_large">
       <input type="text" id="text-input-id-47" placeholder="A placeHolder" required="" class="slds-input" />
     </div>
   </div>
   <div class="slds-col slds-size_1-of-4 slds-m-right_xx-small slds-m-top_large">
     <lightning-button label="Click Me" variant="brand-outline" onclick={handleClick}></lightning-button>
   </div>
 </div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .