Full code available here https://www.codeply.com/p/eMoXymAE4E
There is a long menu dropdown and i want to add scroll bar which i added using
max-height:200px;
overflow-y: auto;
Which result in hiding sub menu item inside scrollbar
If i add
overflow-x:hidden;
Then horizontal scrollbar get hidden and i can't get view of submenu items.
Is there any way to solve this issue?
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.
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
I am displaying some content via a pop-up and I want to disable the background scroll. What is a good way to do this via CSS?
You can use the CSS property overflow to show or hide scroll bars.
overflow-x -> Horizontal scroll bar
overflow-y -> vertical scroll bar
overflow-y: hidden; // hides vertical scroll bar
Please refer the documentation in w3School https://www.w3schools.com/css/css_overflow.asp
I created horizontal scroll menu as shown in w3schools how to guide,
but my problem is,
it shows a line/indicator while scrolling,
i want to Remove that line.
https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp
How can i remove that Line/Indicator?
I hope there is someone who can help me:
I would like a horizontal menu with horizontal sub-menues - to be visible all time and submenus to be displayed horizontal, instead of vertical dropdown.
I have created a dropdown vertical - I can not change the submenus to bilve shown constantly horizontal
See example fiddle
See this fiddle: http://jsfiddle.net/PhuBQ/7/
the submenu is always visible and it's displayed horizontally.