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.
Related
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.
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 */
I am building a web page with Zurb Foundation. I need my web page to run on phones and laptops. What's unique about my app is I want to do something more refined than responsive design. For that reason, I'm making heavy use of the show-for-small-only and show-for-medium-up classes.
In my phone view, I'm making use of Offcanvas navigation. As the HTML is setup, it works great if you include the content of your page in the off-canvas-wrap div. However, in my scenario, I cannot do that. Instead, I want to have the content of my page outside of the off-canvas-wrap div. This creates two problems:
The menu doesn't grow to the size of the window.
If I make the right-off-canvas-menu the height of the window, it pushes my content down.
I've created a JSFiddle here that demonstrates the problem. Is there a way I can make the offcanvas menu just slide over the top of everything? I do not need to push everything to the left. Pushing is fine. My main issue is I need to have the content where it is, but still have the menu appear full-size when needed.
Thank you
Or if you want to actually use the offcanvas menu and simply have it overlap your content, you can add this CSS (Foundation 5)
.off-canvas-wrap.move-right,
.off-canvas-wrap.move-left,
.off-canvas-wrap.move-right .inner-wrap,
.off-canvas-wrap.move-left .inner-wrap {
height:100%;
}
.off-canvas-wrap {
position: absolute;
z-index:100;
}
.main-content-wrapper {
padding-top: 2.8125rem;
}
And wrap your content in
<div class="main-content-wrapper">
[your page content here]
</div>
I updated your fiddle with the changes so you can see it in action. Obviously if you want to only show the offcanvas menu conditionally, you'll want to add a media query wrapper to those rules so they only affect the page when you want them to. Otherwise you're adding padding to the top when you don't need it.
If you don't want your content to move when you click the navigation button, then you should not use off navigation canvas (that's what its supposed to do). Instead just use the Foundation 5 Button and set the CSS to be height = 100%
http://foundation.zurb.com/docs/components/dropdown.html
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.