1

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

<template> <div class="slds-box slds-scrollable"> <lightning-combobox name="progress" label="Status" value={value} placeholder="Select Progress" options={options} onchange={handleChange} ></lightning-combobox> <p>Selected value is: {value}</p> </div> 

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.

7
  • why do you even want scrollable on combobox? Commented Jun 12, 2020 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 Commented Jun 12, 2020 at 22:22
  • Scrollable scopes the DOM in it. There is no work-around for this Commented Jun 12, 2020 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. Commented Jun 12, 2020 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 Commented Jun 12, 2020 at 22:28

1 Answer 1

1

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

2
  • 2
    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. Commented Jun 17, 2020 at 9:33
  • @salesforce-sas yes agreed. Just workaround, in case you find something please do let know. Commented Jun 17, 2020 at 9:36

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.