It's simple but I can't find the solution.
https://prnt.sc/q6mfb6
https://codepen.io/lastofdead/pen/WNbvXRP
As it appears, the drop-down menu stuck in div. What should I do to get dropdown menu out?
You need to remove overflow-y: auto from .hastanotu as it's preventing your div from showing the content when its height increases, and hence showing the scroll bar. By removing it you let the div flow naturally.
solution: https://codepen.io/obedparla/pen/zYxEgGY
Related
I have created a horizontal menu with an overflow-x: auto; property for the wrapper <div>, and a flex-wrap: nowrap; property for the main <ul>'s <li> elements.
One of the main menu items has a couple of children. I had started with overflow-y: hidden; for the entire menu, and a compromise that no sub-menus would be visible.
After delivering that, I am currently puzzled if there would be an alternative solution which would allow me to include the sub-menu in my setup also. The unwanted behavior is that every overflow-y option that I set to the wrapper <div> allows my users to scroll the parent menu out of the view vertically, when the sub-menu items become visible, since the sub-menu opens vertically. Ideally I would like to allow the sub-menu to open outside of the container (something similar to z-index:99999; which I have tried, but of course did not work). Chrome Dev Tools includes an overlay option which looked promising, but I could not find any documentation on that, and applying it did not work either.
This is a screenshot of the horizontal menu when the sub-menu is collapsed and I have scrolled to the sub-menu parent item horizontally.
This is what it looks like when the sub-menu is expanded and I have scrolled vertically slightly. The sub-menu items are appearing in the wrapper space, but scrolling to them forces the parent menu out of the view.
This is what the entire thing looks like if I add a height of 300px to the whole wrapper, to reveal the whole of the parent and child menus.
Lastly, this is the effect that I am after.
This is my first time on SlackOverflow, i hope that you can help me.
I'm trying to achieve something tricky regarding my skill on development and specifically on Bootstrap.
I've created a template with dual Navbar (top and left).
The left one is a fixed navside where there is 3 kind of experience : Expanded, Not Expanded, Not visible.
As you can see, my Expanded NavSide is working perfectly with Scrollbar and Dropdown inside the nav
Expanded SideBar with Dropdown
The not visible experience is also working perfectly.
Not Visible SideBar
When i'm working with my not expanded SideBar, everything is perfect if i don't have too many item menus. If i have too much items i can't scroll on the Sidebar because i've only activated my css for expanded js.
Not Expanded SideBar without Scroll
Where is the issue ? I want to keep the same experience for the not Expanded version with Dropdown displayed on the right of my navside. But if i put the overflow-y scroll on my navbar, the dropdown on the right side is not displayed anymore (but the scroll is working well).
Not Expanded Sidebar with scroll but no Dropdown
Any idea if what i'm trying to achieve is possible ?
I can share my code if needed :)
Many thanks !
Please help me to fix menu on the top of the body and that should be scrolled horizontally.
I used position:fixed for the particular <div> tag with top:0;left:0 values. But when I resize the window to 50%, the fixed menu appearing only 50% remaining part was got inside the border (not appearing).
Please make me to fix this problem to view the menu with scrolling when we decrease the window size..
You can use bootstrap this will help you to fix the nav bar and this will not disturb the page on resizing the content. You can see the example Here.
I have a page I'm working on that encompasses a vertical drop-down menu. However, when the menu drops down, it pushes the text below it downwards and off the page. This is expected, but this enables the scroll bar on the side of the page. I was wondering it there was a way to get rid of this. In other words, it shouldn't just not scroll, but never even offer the option to scroll.
Thanks!
If you want no scrollbar to appear and no scrolling whatsoever to occur, in the CSS for the div in which you contain said dropdown use
overflow: hidden;
This will cut off any 'additional content' though; see an example here
Use overflow: hidden; on the element you want to hide the scrollbar on.
I have two buttons in a div with position: fixed; but when you click, the list of options disappeared.
I wrote my code in the link below, you can help me?
http://jsfiddle.net/T9QHw/
Thanks.
The list of options disappear, because you're telling the div to hide everything that goes beyond the div itself using overflow:hidden. Clearly, the dropdown menu is outside of the div.
Remove overflow:hidden and it will work.