Align Vertically Combobox and Lightning Input

lightning-comboboxlightning-inputfieldlightning-layoutslightning-web-components

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)

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>

Best Answer

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.

Here is what look like:

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

Related Solutions

[SalesForce] Lightning Web Component Combobox

Though I am late in answering this question, but here is the other approach to populate combo box values.

Controller

Here retrieve UserRole records based on SOQL query and no data transformation in this class

public with sharing class UserRoleController {

    @AuraEnabled (cacheable=true)
    public static List<UserRole> getUserRoles(){
        return [SELECT Id, Name FROM UserRole];
    }
}

js Controller class

In this class, inside wiredUserRoles() method, perform data transformation for value and label.

Use, roleOptions() getter property to return the array.

/* eslint-disable no-console */
import { LightningElement , wire, track} from 'lwc';

//import method which should be used from Controller
import getUserRoles from '@salesforce/apex/UserRoleController.getUserRoles';

let i=0;
export default class DisplayUserRole extends LightningElement {

    @track items = []; //this will hold key, value pair
    @track value = ''; //initialize combo box value

    @track chosenValue = '';

    @wire(getUserRoles)
    wiredUserRoles({ error, data }) {
        if (data) {

            //create array with elements which has been retrieved controller
            //here value will be Id and label of combobox will be Name
            for(i=0; i<data.length; i++)  {
                this.items = [...this.items ,{value: data[i].Id , label: data[i].Name} ];                                   
            }                
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

    //gettter to return items which is mapped with options attribute
    get roleOptions() {
        return this.items;
    }

    handleChange(event) {
        // Get the string of the "value" attribute on the selected option
        const selectedOption = event.detail.value;
        console.log('selected value=' + selectedOption);
        this.chosenValue = selectedOption;
    }

    //this value will be shown as selected value of combobox item
    get selectedValue(){
        return this.chosenValue;
    }
}

HTML

<template>
    <lightning-card title="Display User Role" icon-name="custom:custom63">
        <lightning-combobox
            name="Role"
            label="Role Name"
            placeholder="Choose Role"
            value={value}
            onchange={handleChange}
            options={roleOptions}>
        </lightning-combobox>
        <p></p>
        Selected Value:
        <lightning-formatted-text title="Chosen Key" value={selectedValue}></lightning-formatted-text>
    </lightning-card>

</template>

Output

After selection, display the value.

[SalesForce] Get value of lightning-input and lightning-combobox from for loop in LWC

You need to maintain the state of the values in the controller. And to do that, you need to pass in the new values from the loop into the controller via an onchange event, and then update the array in the controller. To identify the record to update, you can set the name of the input to be the data.id, and use event.target.name to then lookup the id in the array Here's a quick example with some sample data. Notice the onchange event to pass in changed value, and the name is set to data.id In the controller, the onchange event read the id, finds in in the tobeOppProduct, and can then update it, or whatever you need to do.

 <template for:each={tobeOppProduct} for:item="data">
        <div class="slds-grid slds-gutters" key={data.Id}>
            <div class="slds-col slds-text-align_center variant slds-size_1-of-3">
                {data.ProductName}
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input onchange={onfieldchange} type="number" name={data.Id} formatter="currency" step="0.01" value={data.UnitPrice}
                                 message-when-bad-input="Please enter a Valid amount"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-combobox onchange={onfieldchange} name={data.Id} placeholder="-Select-" options={VariantValueOptions}
                                    value={data.VariantValue}></lightning-combobox>
            </div>
        </div>
    </template>

Controller:

export default class StackExExample extends LightningElement {

  tobeOppProduct =
    [
      {
        "Id": '1',
        "ProductName": "Prod 1",
        "UnitPrice": 5,
        "VariantValue" : 100
      },
      {
        "Id": '2',
        "ProductName": "Prod 2",
        "UnitPrice": 6,
        "VariantValue" : 102
      }
]

 onfieldchange (event) {
    let dataid = event.target.name;
    let newvalue = event.target.value;

    let currentvalue = this.tobeOppProduct.find(etd => etd.Id == dataid);
    console.log(currentvalue);

  }

  get VariantValueOptions() {
    return [
      {label: '--None--', value: ''},
      {label: 'Option 1', value: 'Option 1'},
      {label: 'Option 2', value: 'Option 2'}
    ];
  } 
 
}

Best Answer

Related Solutions

[SalesForce] Lightning Web Component Combobox

[SalesForce] Get value of lightning-input and lightning-combobox from for loop in LWC

Related Topic