I've got an affixed data-spy side-menu div that has too many elements to fit in my browser window. The side-menu contains links that anchor to other areas in the same page.
Currently, the div is affixed to the page just fine, but since there are too many elements I can only navigate to about half the links in the menu. This is bad because I want to be able to easily go from item to item no matter where I'm at in the page - the page is very long.
If I add style="overflow:scroll;", a scrollbar appears in the affixed div, but the scroll is grayed out and it won't actually scroll.
How can I make the affixed div scrollable?
Add height property to your div.
This is what worked for me (and what I copied from Bootstrap's documentation page...)
height: max-height: calc(100vh - 4rem);
overflow-y: auto;
Now the scrollbar appears only when needed (viewport height is insufficient for the content). Seems to work nicely at first glance...
See also: How to add auto scroll bar vertically to cssbootstrap affix menu for smaller screens?
Related
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;
Here's what bootstrap says about that:
Support for overflow: hidden on the element is quite limited in
iOS and Android. To that end, when you scroll past the top or bottom
of a modal in either of those devices' browsers, the content
will begin to scroll.
What can I do to prevent that?
Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?
I had the same question myself before.
What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto.
It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.
jsfiddle example here
I have implemented a sticky footer using CSS3.It works fine for the footer.But in the same page I have datepickers and other jquery widgets which popout from elements.
The problem occurs when scrolling.
On scrolling the widgets also move from their corresponding position that is not needed because if i have two datepickers one after other and open the first and scroll the calendar position may change to second one's calendar position and cause usability issues.
when removing the sticky footer style especially
body {
height : 100%;
}
everything works fine
Fixed the issue.
There was an
.mainContainer, .dashBoard {
float: none !important;
overflow:auto !important;
}
and on removing the overflow auto the calendars remained their corresponding positions on scrolling.
The example here .
But dont know the reason .Can any one explain the reason pls.
I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.
I am using Twitter's Bootstrap fluid layout for my site. I have a collapse/expand accordion and inside of one of the sections, I have three columns that I would like to be separately scroll-able. These columns currently expand to the full height of their content, but I'd instead like them to expand to the viewport (viewable page) and show a scrollbar to get to the rest (when it is not already all visible).
The scrollbars will show up if I set the column to: overflow: auto; height: 500px;
I don't want to set the height; however, I want it to be set to whatever fits in the viewport.
I understand you can set a div's height to 100% in order to expand to the viewport; however, it has to depend on a containing elements height. I'm not sure how to deal with this within Bootstrap.
appart $('#collapseOne').on('shown', sizing()); not resizing properly if you resize after loading.
This is working pretty much ok on desktop.
http://jsfiddle.net/baptme/MwzvD/17/