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.
Related
I am trying to figure out how to create a simple mobile first layout with two sliding panels. Basically, if the width of the viewing area is less than 700px I would like the layout to look like this:
This will mostly be for mobile screens and allow the user to click the hamburger menu in the top left to have the left menu slide in to the left, or click the ellipsis in the top right to have the right menu slide in from the left. Seems simple but I want both menus to be fixed so when the main content is scrolled through the menus don't get put up at the top.
Also, when the viewing area is over 700px I want the two menus to show automatically like this:
I was wondering if someone could help me with this real quick. I can't seem to nail it down. I appreciate it.
To achieve the responsive requirement, you could use media queries to set specific CSS styles to the screen size you want.
To achieve the fix top menu bar, you could refer to position:fixed
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?
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.
Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.
If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.
Neat little effect.
I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.
Not sure how to actually code that though.
Can someone help out, maybe even a basic fiddle?
You can do this with simple CSS.
.div_name {
position:fixed;
}
check W3schools Position fixed property for tags
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.