I'm using css flexbox to do a header/body/footer layout. However if spicing up the outer-div with overflow-x:hidden, Chrome begins to crop the bottom (the status element) when reducing height of the viewport, and introduces a vertical scrollbar.
Firefox works as expected by shrinking the body-element height, and continue to show the statusbar when reducing the browser height.
Chrome restores the correct layout if reloading page, or changing the viewport width.
Stackblitz sample:
https://stackblitz.com/edit/angular-xtapbp
The difference between Chrome and Firefox can be seen by showing the above stackblitz in the two browsers.
The implied value of min-height (or min-width for default flex-direction: row orientation) is auto for flex layouts. For some reason, Chrome decides, that the size of the content that you have during initial page render should be treated as current auto value, and during window shrinking it does not recalculate the whole layout. Probably it is a bug in Chrome css layout engine. A solution for this is to add min-height: 0 to the content+status div, as shown in this link.
Related
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
I have created the following responsive page here: http://asapuat1.bigredsky.com/mjb_v2.htm?cid=290&jbid=184
For the widths 640px to 1117px i have a 2 by 2 layout with 1 spacer div on the top and bottom rows to ensure correct alignment. Margins on input fields are set to %'s and the input fields themselves have a % width also, with a max-width of 280px.
All this works fine in Firefox, and Chrome, but in IE11 as the width is re-sized by dragging the browser window the vertical alignment changes, and the input fields are no longer vertically aligned correctly.
I suspect the spacer divs may be causing the issue, display on them when required is set to inline-block and when not required set to none.
Strangely when i encounter the issue switching off default css box-sizing: inherit via developer tools fixes, but re-size the window again and the issue still occurs
Any feedback would be appreciated.
Issue was resolved by using margin values in pixels on input fields instead of percentages and having css only for IE 11:
e.g.
#media only screen and (max-width:69.75em) and (min-width:55em) and (-ms-high-contrast:none)
input[type='text'], input#mjb-ico-search,
#topSpacer1, #bottomSpacer1, #topSpacer2, #bottomSpacer2, #middleSpacer1, #middleSpacer2, select {
margin: 20px 44px;
}
}
I'm using the xeon Bootstrap template (http://shapebootstrap.net/preview/?id=64). Firefox on a Mac renders the margins close to the edge of the window. Safari, using a window that is exactly the same size, renders the margins much wider.
Two questions: Why is this? How can I configure Bootstrap to be more consistent across browsers?
Thanks.
I'm not on a Mac so I cannot verify what I'm about to suggest. A screenshot might be helpful or a link to the page. There is not a lot to go on here, hence the lack of answers, but I'll give it a shot.
I'm assuming the issue is with the browsers and not Bootstrap or some sort of perception of difference that is not fully understood.
What exactly do you mean by "is exactly the same size"? Are both browsers maximized? Did you manually re-size them so the top, right, bottom and left edges line up? If so, that doesn't mean the viewports are the same size. Each browser has it's own chrome, UI elements (scrollbar) and etc., that can be different sizes and which will affect the viewport size.
The .container element's margin is set to auto which the browser automatically calculates for set width elements like .container. Bootstrap's .container class has specified widths for various viewport sizes. You might be viewing your page at a viewport width that is very close to a breakpoint and the right scrollbar (or something similar) is slightly smaller/larger in one browser than in the other. This in turn could trigger the page to render at a different widths giving the appearance of different margins.
For example:
Bootstrap has a breakpoint at 992px.
If your viewport width is 995px in Firefox, Bootstrap would render .container at 970px.
If your viewport width is 990px in Safari, Bootstrap would render .container at 750px.
Based on this suggestion of it being a breakpoint issue I would find out what each browser's viewport width is exactly. Then make sure you set them to the same width. If you get the same result/issue, then you will know it is not a breakpoint.
Additional information would be helpful.
Hopefully this points you in the right direction.
In Safari, when using the dynamic vw CSS unit for width and height, the parent element (without specified dimensions) will not adjust itself to the child element's width dimensions. Below is a fiddle and some screen shots:
http://jsfiddle.net/gby3N/
Any ideas or workarounds to this issue?
I got the same behaviour in Safari 7.0.4 and the only explanation I can come up with is that it's a Safari bug. Which is strange because I could only find people talking about iOS Safari having issues - nothing about desktop Safari.
Luckily the "buggyfill" that fixes iOS Safari's handling of viewport units, at https://github.com/rodneyrehm/viewport-units-buggyfill, seems to work here as well. I just had to add
<script src="https://rawgit.com/rodneyrehm/viewport-units-buggyfill/master/viewport-units-buggyfill.js"></script>
<script>window.viewportUnitsBuggyfill.init(true);</script>
to get parent to stretch to fit child in Safari. Note that I used init(true) instead of just init(), which checks for an iOS user agent.
Demo: http://jsfiddle.net/gby3N/2/
You also might have the option of simply adding min-width: 12vw; to the parent element. (12vw is the width of the child element.)
If you view the following website in IE9 (or any other modern browser) you will see the effect I am going for.
However viewed in IE8 or lower the header DIV that contains the mans photo collapses to what appears to be 0 height.
I have tried min-height and also the clearfix, but nada.
http://www.adrianwaddingham.com/
Have you tried just setting the height and making it !important, such as:
min-height: (yourheight)px!important;