Teleport the dropdown menus in the body so we can use `overflow: auto` on the menu bar

[xiangshu233]

trafficstars

Describe the bug After setting the toolbar to scroll horizontally, the drop-down menu will be wrapped by the scroll bar

Expected behavior Drop-down menus should not be covered by scroll bars

Screenshots

https://github.com/motla/vue-file-toolbar-menu/assets/49575330/7250ec1c-0da0-497c-bd91-4c8c420f6b44

[motla]

Hi! Nice project you got there, well done! Unfortunately I would have loved to do the same behavior, but CSS doesn't let us do that 😢 at least to my knowledge. Keep me in touch if you find some way to do that in CSS.

Another approach would be to create your own scrollbar in JavaScript, and when you move it, it sets negative pixels on CSS margin-left of the bar (margin-left: -100px for instance). Two ways to create the scrollbar: Either you design your own scrollbar below the bar with stylized divs, set to the correct width and left by JavaScript, and responding to user events (mousedown, ...). Another "simpler" way is to have a div set like width: 100%; height: 16px; overflow-x: auto below the bar, containing only an empty div which has the same width that the bar (should be set with JavaScript), and to sync the scroll event to set the margin-left of the bar. I'm not sure it's easy to understand. It sure needs a few hours fiddling with JavaScript to get there but it is totally feasible.

[motla]

Thinking a bit more, actually if your scrollbar is larger than your page and its overflow is visible for it to display the popup menus, it should trigger the page scrollbar, unless you have set the body or a parent element to have overflow: hidden. For you to be able using the trick I described, you necessarily have to disable the browser scrollbars and make overflow: auto on the divs you want to scroll...

[xiangshu233]

To be honest, I don't understand what you mean. Maybe I didn't describe it clearly. My scenario: The toolbar may not be fully displayed on a 15-inch laptop because the width is too small. For this reason, I want to display a horizontal scroll bar when it can't fit. I did add a scroll bar to it, but I don't know why the drop-down menu is in the scroll bar container. I looked at the style of the drop-down menu, position: absolute; z-index: 1000. Isn't it already set to the highest level and out of the document flow? To be honest, I don't know why this problem occurs.

The above is from Google Translate. Please forgive me for my poor English.

[motla]

Yes I understood your issue, I had the same issue in my project. The thing is that with CSS, when you set overflow: auto or overflow: hidden to a <div>, nothing can be displayed outside of the boundaries of this <div>. It's like that, it is the rule, there is nothing we can do about it... There is no way to achieve this using pure CSS to my knowledge. It's not a bug, there is just no way of making things appear over a scrollbar or outside the div.

That's why I proposed a JavaScript way of making a custom scrollbar without using the CSS overflow property. If you are familiar with JavaScript you can do it that way.

[xiangshu233]

I understand this time, thank you for your reply As far as I know, many UI frameworks will deal with the drop-down menu problem by inserting the drop-down list into the body element, maybe this method is feasible

teleported: whether the dropdown popup is teleported to the body
boolean — true

Thanks for your reply again, good night

[motla]

Yes but it will loose the relative position to the menu, so I have to place the dropdown manually using JavaScript. Actually it could be a good idea to implement this teleported boolean. I have no time to look at it right now but if you want to make a PR you're welcome to do so.