0

I need to align 4 inputs fields that are dynamically build (c-filter-component), they can be either of type combobox or of standard lightning input and maximum 4.

The problem is I am unable to align all of the different types vertically, so for instance , if i have 2 combobox and 2 standard lightning input, the comboboxes align correctly but a bit lower than the rest of the lightning inputs, which also align each other correctly but a bit higher than comboboxes. (see image)

enter image description here

Any idea of how to fix this and make them all align to the bottom of their container?

    <div class="slds-col slds-grid slds-size_1-of-1 slds-box_small slds-container_center slds-col_bump-bottom">
        <template for:each={filterList} for:item="filter">
        <div class="slds-col slds-size_1-of-4  slds-col_bump-bottom" key={filter.FilterUIName}> 
            <lightning-layout>
            <lightning-layout-item size="11" alignment-bump="bottom" flexibility="auto">
                <c-filter-component key={filter.Id} 
                    data-item={filter.Id} 
                    filter={filter} 
                    target-object={filter.TargetObject} 
                    onvalueselected={changeFilterValue} 
                    onvaluesselected={changeMultiFilterValue}>
                </c-filter-component>
            </lightning-layout-item>
        </lightning-layout>
            </div> 
    </template>
</div>

Code for filter-component as I said its just a combobox or a lightning-input depending on custom logic:

<template>
    <template if:true={filter}>
        <template if:true={isDuallistbox}>
            <template if:true={picklistValues.data}>
                <lightning-dual-listbox
                        name={filter.FilterUIName}
                        data-id={filter.Id}
                        label={filter.FilterUIName}
                        source-label="Optionen"
                        selected-label="Ausgewählt"
                        options={picklistValues.data.values}
                        value=""
                        onchange={handleMultiFilterChange}>
                </lightning-dual-listbox>
            </template>
        </template>
        <template if:false={isDuallistbox}>
            <template if:true={picklistValues.data}>
                <lightning-combobox
                        data-id={filter.Id}
                        name={filter.FilterUIName}
                        label={filter.FilterUIName}
                        options={picklistValues.data.values}
                        value={filter.FilterUIValue}
                        onchange={handleFilterChange}>
                    </lightning-combobox>
            </template>
            <template if:false={picklistValues.data}>
                <template if:true={isComparisment}>
                    <lightning-combobox
                        data-id={filter.Id}
                        name={filter.FilterUIName}
                        label={filter.FilterUIName}
                        options={comparismentTypes}
                        value={filter.FilterUIValue}
                        onchange={handleFilterChange}>
                    </lightning-combobox>
                </template>
                <template if:false={isComparisment}>
                    <template if:true={hasLabel}>
                        <label for="filter.Id">{filter.FilterUIName}</label>
                    </template>
                    <lightning-input
                        type={filter.FilterUIType}
                        id={filter.Id}
                        name={filter.FilterUIName}
                        data-id="filter.id"
                        variant="label-hidden"
                        class="slds-var-m-bottom_small"
                        label={filter.FilterUIName}
                        value={filter.value}
                        onchange={handleFilterChange}>
                    </lightning-input>
                </template>
            </template>
        </template>
    </template>
</template>
2
  • it would easier for us to identify the root cause if you can share us the code for filter component as well. I used your parent component code but couldn't replicate the same issue.
    – Wayne Ni
    Nov 1, 2022 at 21:58
  • thanx, I just added it
    – Juan Ge
    Nov 2, 2022 at 7:03

1 Answer 1

0

Based on your filter component, it seems for lightning-input, you are adding label tag instead of using label attribute in lighting-input component.


            <label for="filter.Id">{filter.FilterUIName}</label>
            <lightning-input
                        type={filter.FilterUIType}
                        id={filter.Id}
                        name={filter.FilterUIName}
                        data-id="filter.id"
                        variant="label-hidden"
                        class="slds-var-m-bottom_small"
                        label={filter.FilterUIName}
                        value={filter.value}
                        onchange={handleFilterChange}>
            </lightning-input>

This will create some unexpected height as lightning-input reserves spaces for label attribute.

I did some POC for your reference. enter image description here

Here is what look like: enter image description here

So I would say remove the label tag in filter component, instead using label attribute in lightning-input will resolve the element alignment issue.

You must log in to answer this question.

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