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.
Related
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.
I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.
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.
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
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