As shown in below screenshot, can be noticed here on getbootstrap.com by lowering the browser height. As sidebar is fixed there for when height of sidebar increases specially in case of multiple hierarchies it starts hiding items underneath it. And page scroll do nothing to show the hidden items.
How can I overcome this issue?
You need to enable scrollbar to side panel so user can scroll for hidden menus.
you need to fix visible height of window to sidebar container.
Related
I built a sidebar component but having problems with overflow. I want to show a menu from the sidebar
Here is a draft I have now:
sidebar = drawer -> list -> list-item -> list-item shows title and absolute positioned menu
The drawer component should be visible, but then it can't be scrollable.
If I put overflow-y:scroll on list, then x axis is also scrollable.
I see that this is a common problem.
Any suggestion
you can add overflow-x: hidden or can give fixed width as well.
but i will be able to provide right solution if you can share your html and css.
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
Is there a way to have a scrollbar appear on a div depending on the devices height?
This menu is opened by a hamburger drawer on the side.
Drawer contains 3 divs - login div, menu div and social media div
You can reorder all 3 divs on your liking.
My menu div is customization on how many items it will show.
My problem is that of there are about 10 items in the menu and is viewed on a phone. It overlays over the bottom div if there is one.
I would like it not to overlay other divs.
I tried using
Css - Overflow-y:scroll but that requires a fixed height.
I tried using JS as well with this example
http://jsfiddle.net/6WAnd/20/
But my header and footer can vary so it won't work
P.S Maybe check if the div exist or not first? How would i implement this?
Is there another way i can achieve this?
I've got an off-canvas menu, and it's working very well for my Mobile layout.
However, when I expand the menu item to show the submenus under it, the whole page can scroll horizontally. Not so perfect.
I'm just controlling the class name to display: block.
http://dev.martinilab.com/so1/index.html
I'm not sure what is causing the problem.
The problem is that you don't have a height set on .row, so it's as tall as the content forces it to be. When you display:block that class and cause those menu items to be displayed, it forces the content further down, and since the page is as tall as the content, the page gets longer.
If you want to fix it, either set a height for that class or take those menu items out of the document flow so it doesn't push the content down.
I have 5 DIVs that use Twitter bootstrap to show or hide the information inside of them. When my page renders, two of the boxes are defaulted to open. When the height of the boxes open are taller than the screen, the page is forced to scroll to the bottom.
I want to have the page remain scrolled to the top, while forcing the overflow to the bottom, but have no idea how to go about this.
It's solved with this CSS rule:
body.modal-open {
overflow: hidden ;
}
No extra JavaScript needed, because the bootstrap modal automatically adds the 'modal-open' class to the body.