I'm using a lightning-combobox and I have it inside a div section with slds-scrollable.

<div class="slds-box slds-scrollable">
        placeholder="Select Progress"
        onchange={handleChange} ></lightning-combobox>

<p>Selected value is: {value}</p>

What's happening is when I click a drop down they go inside scrollable div context and I'm trying to display on top of scrollable div any solution please I tried z-index: huge number and didn't work.

Click here to see in playground.

Screenshots : Left is with scrollable and right is without scrollable

Left is with scrollable and right is without scrollable

I need a scroll bar but combobox menu should show on top of all elements.

  • why do you even want scrollable on combobox? Jun 12 '20 at 22:15
  • Hi @Salesforce-sas thanks for reply actually its in a custom table and the whole table is inside a div which have slds-scrollable. Just to drill down to problem I have written question like that, please note if I remove scrollable it works but I need that property too
    – vkm
    Jun 12 '20 at 22:22
  • Scrollable scopes the DOM in it. There is no work-around for this Jun 12 '20 at 22:23
  • Even style="overflow: auto" does the same, I read about z-index which works but not in Salesforce I tried a lot.
    – vkm
    Jun 12 '20 at 22:26
  • Even z-index does not help when you add scrollbars. Z-index is for giving priority but scrollable just scopes the DOM inside it, so nothing we can do about it Jun 12 '20 at 22:28

Found a way we can use style="position:absolute" but need to be careful with the position as it might cause to overlap. Please check here

  • 1
    you are positioning it w.r.t window and thats why u r feeling its working. Check this. When you position it w.r.t its immediate parent, it will start failing again. This is not workable solution. Jun 17 '20 at 9:33
  • @salesforce-sas yes agreed. Just workaround, in case you find something please do let know.
    – vkm
    Jun 17 '20 at 9:36

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.