I am working on a web app. I use a NavBar and on some pages I have to center the content (vertically and horizontally).
To make the navbar + the rest of the content occupy 100% of the page (more if the content is big) and to make the centering work, I do:
html,
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
Without the flexbox, a scroll appears on my page and I can scroll just past the navbar + the content is not centered - it will be after I scroll down. And this happens even when the centered content is just a single little <span>. So I thought the flexbox is the answer here, easy. But I stumbled upon another problem:
I sometimes display card-like divs - rounded borders with a header which is filled with a color. Background color fill + border-radius don't play well together (basically the rounded edges disappear as the color overflows the borders), so I use overflow: hidden.
The problem that I encountered is that if I do three things:
I set the flexbox for html and body tags like I've shown above
I set overflow: hidden for my div
I add more content to the div - so much, that it doesn't fit on the page and a user would have to scroll it vertically
then the scroll doesn't appear and the content inside my card is cut/truncated just before the page ends - so no scroll. And no content.
This is the codesandbox example: https://codesandbox.io/s/angry-pare-1qokr.
To see what I mean try either:
removing the flexbox props from html and body (you can leave the height and the margin)
removing the overflow: hidden from .card
If you do, then boom, scroll appears and the content is no longer truncated.
And I cannot proceed without any of them because I either:
lose the ability to not have the scroll when having just the navbar and some <span>
or
lose the rounded edges, because the card's color will overflow (I didn't show it in the example, but I use it)
The .navbar and .center classes are there just to show that:
this is how I basically define the navbar in my project (although here I defined the height as fixed pixels, normally I don't do that so I cannot easily, I guess, calculate the height for the rest of the content)
the .center class is used by me to center the whole content below the navbar, when I want it to be centered
So finally my question is: can I somehow preserve the ability to have flexbox defined for my html and body tags, have overflow defined for some long divs and make it so the div's content isn't truncated when it becomes too long - basically the page would render a scroll then?
P.S If the solution would be not to use flexbox to make the centering without the scroll work - perfect for me, if you guys know how to do it without flexbox (as without the flexbox, my issue with truncated div content gets solved)
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'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?
I have made the main framework of my webpage in HTML / CSS but now realise that i need a sticky footer which is always stuck at the bottom of the screen so position fixed and i need the internal segment where all webpage content goes called (wrapper) to stretch from the bottom of the header to the top of the footer, so what i would like is that when you zoom out on the web browser the wight segment fits the whole height of the browser so that it would work on any display height.
Here is a JS fiddle
http://jsfiddle.net/Q8JpC/5/
If anyone finds out how to do this please could you write the code in stack overflow as a reply as this jsfiddle is just my test website and will not be using it for the real thing.
I have tried setting the wrapper as
height:100vh;,
this does always fill the screens height but it does not allow for when i add content it does not extend to fit the content off the screen.
Thankyou very much for any help ! thanks
didn't apply it to your design but i often use this technique:
See: Modern sticky footers
I would also suggest to use html5 markup tags, they are created to get the semantics right instead of using classes like header, nag, footer, etc...
EDIT.
I edited your fiddle here:
JSFiddle
Just add:
html {
position: relative;
min-height: 100%; }
Besides that, change the body to position absolute instead of fixed and add a margin-body to the body element w(same as height of the footer).
I have an issue with my web page.
Basically, I have the <html> on overflow:hidden, two horizontal navbars, one fixed vertical sidebar on the left and in the remaining center, one div that has the height: 90% property.
Edit: The container div has the overflow: auto property.
The content is loaded in the container area via AJAX. The content consists mainly of tabular data, and the point is to have the container area scroll whenever there is too much content. Everything works nice and fine on a regular monitor with normal height, but when it's taken to a laptop, the last 1-2 rows become 'hidden' due to html overflow.
If i decrease the original height: 90% to a smaller value, problem fixed, but after I switch to large screen with the decreased height, the content area is not fully covered.
Is there a way to fix this issue via CSS? If not, is it possible via screen resize javascript event?
The easiest and probably the fastest way to do it would be using Javascript.
If you specifically set the height of your tabular data container, you will gain much more control over the layout and general item spacings.
When setting your height, you have to take into account the heights of your navbars, so in jQuery the code would look something like this:
function resizeMain()
{
$('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}
// size it on load:
$(function(){
resizeMain();
}
// and size it on resize
$(window).resize(resizeMain);
Of course, many ways to optimize this, but that's the idea. And you have to watchout for tiny screens, but this would be a problem with % anyway.
Finally, you need Overflow: auto; on our tabular box
in the div that is height:90% put overflow: auto or overflow: scroll. That'll add a scroll bar to that div only.
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/