[Dropdown] Direction Detection Should Account For Overflow Container

[KhadeerUI]

I am added multiple drop down in table with single row and multiple columns and i am added scroll bar with table then drop down click the menu that options not visible because i am added css property overflow: hidden; with table div, how can i solve this issue?

[jlukic]

I need a test case to know what's going on.

https://github.com/Semantic-Org/Semantic-UI/blob/master/CONTRIBUTING.md#bugs--issues

[gabormeszoly]

@KhadeerMojostreet here is a test case: http://jsfiddle.net/gabormeszoly/6z7udjmx/4/ everything is fine in my browsers, btw your scrollbar is queer, check the z-index first

[jlukic]

Thanks gabor. Closing due to inactivity. Looks good from here.

[gabormeszoly]

@jlukic you are welcome

[KhadeerUI]

Thanks @gabormeszoly But my question is when i am added table property overflow scroll that is not problem, problem is when i am add Jquery scroll bar plugins that css property overflow hidden, so then not properly visible dropdown

[startswithaj]

@KhadeerMojostreet did you solve this?

[startswithaj]

Testcase: http://jsfiddle.net/6z7udjmx/5/

Scroll to the bottom of the div and click the last semantic dropdown(it says "Compact"). Some of the options are obscured because of the overflow:scroll.

Click the native select. The options are shown over the top. (they are not hidden by the overflow scroll)

I'm not sure if this issue can be solved. But there is a test case now. According to someone on stack "You can't. overflow: hidden; Hides content outside the element. Period."

[jlukic]

Yeah, 2.0 will automatically adjust direction based on edge of browser however it does not currently look for overflow container.

http://beta.semantic-ui.com/modules/dropdown.html

[KhadeerUI]

@startswithaj I have did not solve. I am using only horizontal scroll and vertical scroll is hidden. http://jsfiddle.net/6z7udjmx/6/

[stokescomp]

Don't you need to make the height of the div 200px to see the issue? I would like the dropdowns to go above the table or div that is overflow hidden. You will see this issue better if you add more rows so they go below the bottom of the div. Then when you use the bottom dropdown it puts its dropdown inside the hidden part of the div.

[PavanKu]

I am able to reproduce this scenario. Please check fiddle link. i see issue when fixed size segment is present in the middle of the page and this segment's overflow property is set to scroll.

http://jsfiddle.net/xy07ogzr/

Attaching snap-shot.

[KhadeerUI]

Hi @PavanKu,

But use only overflow-x hidden then problem is there.

[PavanKu]

@KhadeerUi , Could you please make change in fiddle and share it.. So that i can understand the changes properly.

[KhadeerUI]

Hi @PavanKu,

I am using this type of table in my project (additional custom scroll bar m using for table). In table m using dropdowns that does't overlap properly. See the example link: http://jsfiddle.net/KhadeerUI/xy07ogzr/3/

[vtumrukota]

My team is running into the same issue that was mentioned by @PavanKu where our dropdowns are not overlapping the overflow: auto container, nor opening upwards when it reaches an edge - @jlukic are there any plans to update this fix? I took a look into the dropdown.js source code (line 3052), and I believe its an issue with how the "above" parameter is calculated

onScreen = { above : (calculations.context.scrollTop) <= calculations.menu.offset.top - calculations.menu.height,

If a context (the parent container with a fixed height and overflow:auto) is passed in, the value scrollTop always returns 0 which sets the above flag true, which is not always ideal as it always open the dropdown upwards as in the screenshot below.

Is it possible to add a boundary property here like there is for popups to adjust the opening of the dropdown - The context doesn't seem to be enough for this type of situation.

[kevinluvian]

anyone solved this?

[flamincode]

Also Having this problem. Any fix? My dropdown options appear underneath other content. Making the dropdown a search dropdown solves the issue, but mine is not a search dropdown.

[jbeaulieu-st]

I got the same problem: I got one dropdown in a cell that doesn't have overflow, that is working fine : And another one in a cell that has overflow-x: hidden (I need this to match the design) that is not working 👍

BTW: Issue 5441, 5632 and 5769 are closed by refering to this issue.

[GammaGames]

I have this issue, a modal with scrolling content where the dropdown is contained inside the modal and just adds height to the content to scroll. My current workaround is to make the content not scrollable.

(I found this issue from here)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[Oktagram]

After a few hours of suffering, when I was close to refuse from this dropdown, I've finally found the solution: set "overflow: initial" to my modal div and to div which contains the dropdown (I think, if you have more complex div hierarchy then you need to change this property to each div). Hope it will help someone.

[ddio]

@Oktagram's fix just worked in my case!

[bugu]

@Oktagram Thank you - This solution really works!

[jlukic]

You can pass in $('.ui.dropdown').dropdown({ context: $('.ui.modal') }); or whichever is the scrolling context and it will open upward if it cant fit.

[eCorke]

Any real solution yet? Cause overflow causes other issues such as overflowing of other elements...

[GDnsk]

I got the same problem as well with overflow-x:scroll;

Screenshot:

[johnmikel]

After a few hours of suffering, when I was close to refuse from this dropdown, I've finally found the solution: set "overflow: initial" to my modal div and to div which contains the dropdown (I think, if you have more complex div hierarchy then you need to change this property to each div). Hope it will help someone.

This is witchcraft, right here. :) Thanks man!

[GregoryR13]

Any real solution yet? Cause overflow causes other issues such as overflowing of other elements...

I check with jQuery if the div ".scrolling" (having the dropdown) has child elements that are overflowing and I hide them when the popup "calendar" or "dropdown" is showed with modal scrolling deactivated. When popup is hidden by user, the modal scrolling is puted back and hidden child elements are showed. CSS : .bugPopupUnder { overflow:initial!important; } .HideOverflowChild { display: none!important; }

JS in $...dropdown({...}) or $..calendar({}) :

onShow:function () {
                    var element=$("#modal .scrolling");
                    element.addClass("bugPopupUnder");
                    element=$("#modal .scrolling").get(0);
                    for(var i=0; i<element.childElementCount; i++){
                        if (element.children[i].offsetTop + element.children[i].offsetHeight >
                            element.offsetTop + element.offsetHeight ||
                            element.children[i].offsetLeft + element.children[i].offsetWidth >
                            element.offsetLeft + element.offsetWidth ){
                            $(element.children[i]).addClass("HideOverflowChild");
                        }
                    }
                },
                onHide:function () {
                    $("#modal .scrolling").removeClass("bugPopupUnder");
                    $("#modal .scrolling").children().removeClass("HideOverflowChild");
                }`

[arasovic]

any solutions?

[fholzer]

Unfortunately Oktagram's workaround doesn't work for me. I have a table, and dropdowns in a 2nd column header to allow users to filter specific columns of the table. I have the table wrapped in a div that sets overflow-x:auto, so that when there's a table with lots of columns, it won't extend the whole page on the x axis, causing the whole page to become scrollable. But instead a scroll bar appears just in the table container div, making just the table scrollable. Now the issue appears when the table lists only a small number of records, which makes its height become less than the height of the dropdown list. In this scenario the dropdown list won't overflow the table container div, regardless of the overflow-y value used. Example: http://jsfiddle.net/ferdinandh/tmznopL3/7/

Edit: added example