BUG: The dropdown doesn't take into account the scrollbar.
AnupamKhosla opened this issue · comments
Have a look at the following demo: https://jsfiddle.net/qejvb51s/ Make the screen less than 485px so that the dropdown has to be pushed to the right.
As you can see the dropdown width should have removed scrollbar width from its calculations. At the moment when a webpage has a scrollbar(which is 99% of the websites) the dropdown with dynamic content/width causes horizontal scrolling.
I assume this is an important bug. Do you guys know of a workaround?
Can you assign me? I was able to fix the issue in the demo. Changing the .right class position to relative worked for me, but I'd like to try it for real.
Can you assign me? I was able to fix the issue in the demo. Changing the .right class position to relative worked for me, but I'd like to try it for real.
Really interesting!, how would you guess that? Do you know why does that fix the issue? It wouldn't always be possible to have a relatively positioned parent for the dropdown content; it might break other things in the website.
Secondly consider this demo https://jsfiddle.net/8xtpw23v/1/ I have assigned container: "body" in the initialization. The bug would persist in this scenario.
Thirdly I don't know what you mean by "Can you assign me".
Whatever the container is assigned to determines the size of the dropdown. It seems like an easy fix is to assign the container to the list item that triggers the dropdown. No relative positioning necessary. https://jsfiddle.net/y76vzpba/3/
I'm pretty new to open source so I thought I needed assigned to work on a project. My bad.
It seems like we have a slight communication barrier. Your demo https://jsfiddle.net/y76vzpba/3/ does not work properly for screen size less than 475px. You need to have a relatively positioned parent(li in your case which you have commented styles given).
I found another workaround, which is to give width: 100% to the containing parent of the dropdown: https://jsfiddle.net/gvwsmb6p/
I guess the dropdown plugin uses window.innerWidth instead of document.body.clientWidth. It might be taking into account the width of nearest relatively positioned parent, as the .dropdown-content itself is absolutely positioned. I'm gonna have to dig into the source code to see why these workarounds are working.
You might want to report these issues at https://github.com/materializecss/materialize which is an actively maintained fork.
PRs are very welcome there and will be reviewed, merged and new contributors will become members of the org.