0

I have LWC where if I click on combobox then expected outcome is it should show options at the top but instead it adds a scroll bar to show option.

HTML:

<template>
    <lightning-card>
        <div class=" slds-scrollable" style="height:150px">
            <table class="slds-table slds-table_bordered slds-table_header-fixed slds-table_resizable-cols slds-table_fixed-layout">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th>col 1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <lightning-combobox style="position:absolute" name="progress" label="Status" value={value} placeholder="Select Progress"
                             options={options} onchange={handleChange}></lightning-combobox>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </lightning-card>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    value = 'inProgress';

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    handleChange(event) {
        this.value = event.detail.value;
    }

}

it should show 3rd option at the top but instead it adds a scrollbar as shown in the below image

enter image description here

if I remove slds-scrollable then combobox behaves as expected but scrollable is required, please confirm if can solve this issue.

2
  • It is falling outside of the scrollable div because of the position: absolute – rahul gawale Aug 7 '20 at 13:19
  • 1
    Thank you for your response and I am sorry, I am not able to save anything on the playground added my code in the question. – gs650x Aug 7 '20 at 13:26
1

I have solved this issue by changing

<div class=" slds-scrollable" style="height:150px">

to

<div class=" slds-scrollable" style="height:30rem">

and setting dropdown-alignment="auto" on combo box,

This worked but if anyone have any better solution, please do post here.

2
  • where did you put that dropdown-alignment="auto"? – rahul gawale Aug 10 '20 at 9:21
  • on the combo box tag – gs650x Aug 10 '20 at 19:08
0

Try setting the dropdown-alignment="auto" inside combobox.

Here is example:

<lightning-combobox 
   dropdown-alignment="auto"
   label="Transfer to" 
   options={tmpOptions} 
   onchange={handleChange}
   required>
</lightning-combobox>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.