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.


        <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">
                    <tr class="slds-line-height_reset">
                        <th>col 1</th>
                            <lightning-combobox style="position:absolute" name="progress" label="Status" value={value} placeholder="Select Progress"
                             options={options} onchange={handleChange}></lightning-combobox>



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.

  • It is falling outside of the scrollable div because of the position: absolute Commented Aug 7, 2020 at 13:19
  • 2
    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
    Commented Aug 7, 2020 at 13:26

3 Answers 3


I have solved this issue by changing

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


<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.

  • where did you put that dropdown-alignment="auto"? Commented Aug 10, 2020 at 9:21
  • 1
    on the combo box tag
    – gs650x
    Commented Aug 10, 2020 at 19:08

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

Here is example:

   label="Transfer to" 

Add a CSS file to your LWC containing:

    overflow: initial;

You must log in to answer this question.

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