I'm working on a user interface based largely on flexbox, that can basically be broken down into a content area and a sidebar which can be toggled (its width is changed by adding/removing a class).
When the sidebar is toggled, the content area is manually resized through javascript. It contains an svg canvas which needs to be redrawn, so this cannot be done through CSS. Chrome handles this code perfectly.
Firefox and Safari, however, behave very strangely, and interestingly not in the same way.
I was able to reproduce the behavior in a fiddle: http://jsfiddle.net/q1yp6ssw/21/
It also happens with a regular <div>, it's not just <svg> as you can see here: http://jsfiddle.net/mqok5exb/2/
toggleSidebar() calls the function resizeSvg() which resizes the "svg" element using the size of its parent.
function resizeSvg() {
var width = $svg.parent()[0].offsetWidth;
$svg.attr('width', width);
$svg.find('text')[0].textContent = 'width: ' + width;
}
If you're testing these fiddles in Firefox, you'll notice that the content area resizes too early, and becomes larger than it should be, pushing the sidebar outside the container's original dimensions. Using setTimeout to delay the resize did not work.
It seems to be a problem with timing and when each browser renders the updated size of the parent element. The behavior is the same without the transition, so that's not the problem.
My question: What is causing this and how do I fix it, or at the very least find a usable workaround? If it turns out to be a flexbox problem, then flexbox can be replaced.
Thanks!
I know this is old, but I'm trying to do something similar and in my case changing width with javascript (angular) results in 50px lower than calculated width.
If you want to set exact value for flex you should set both width and min-width with your javascript code.
here is a code which solve my problem:
el.style.width=String(newWidth)+'px';
el.style.minWidth=String(newWidth)+'px';
Related
Show you code first:
https://codesandbox.io/s/vigorous-fog-te1bw?file=/index.html
Please focus on two points:
full-size-bg is full screen background, it use a fixed div to adjust the alpha instead of set background to parent node because I do not want to modify the real image alpha.
scroll-area is above the full-size-bg and it`s(should be) a scrollable area which height is longer than visible area
Then what I want to know is the fixed background will block the event handling if I do not add position: absolute in scroll-area, the scroll area can not scroll with mouse wheel(but it can scroll if use up and down arrow key, Why?). Of course fiexed will leave document flow for layouting, but also for event handling?
Second, Chrome do not need add the z-index line, but Firefox need, Why??
Third, What I need now is a standard way to set a full screen background with alpha programmatically?
Thanks a lot.
Basically, in your example code, the fixed position does not prevent scrolling. The problem is, when you don't set position: absolute for scroll-area div, the full-size-bg div is HIGHER z-index. You can see that by inspecting in developer tool by right clicking, it will show the top "front" element.
You can find an answer here also: z-index not working with fixed positioning.
For question about firefox vs chrome z-index, you can see more here: z-index behaviour is different in chrome to firefox
For third question, I don't understand correctly :(
Whenever I click on the textarea, everything is thrown off balance. Even though I have used min-height and width in the css, the textarea seems to grow/shrink unexpectedly. I have also turned resize off, but that still does nothing. Instead of using rows and cols, I have decided to use width and height in order to have equal element sizes between computer screen sizes.
Link to Code: http://urlext.net/LiylWR
(Link had to be shortened since jsbin output wasn't allowed in Stack overflow without code; which is huge by the way!)
UPDATE: I originally thought this was something between MatchHeight and FlowType but it now appears to be an issue with using flexbox css. I commented out the flex css and FlowType works, but I need it to work with flexbox. Any ideas?
ORIGINAL QUESTION:
I have a page where I have 5 blocks with text and images in them. They are organized in a row and I am using matchheight.js to keep them all the same height and FlowType.js so the text will resize within the boxes and keep the proper layout.
Ideally the header text should all be the same size across the boxes as well as the body text.
However when the page first loads some of the boxes have different size text than the others - even though they all have the same base font size and the boxes are the same size.
When I adjust the size of the window everything recalculates and the font sizes become uniform. What is missing when the page loads that causes the text to not size correctly and/or is there a way to trigger the recalculation without resizing the window.
Here is the code I use to call the js.
$(document).ready(function() {
$('.front-page-guide').flowtype({
maxFont: 40,
});
$('.front-page-guide').matchHeight();
});
Here is a codepen: http://codepen.io/dll416/pen/xgeeoz
So you can see the html and css and see it in action.
The viewport has to be 1200px or below to see the issue.
Thx.
I have a page with tabs that can display various height content, some of which require a scrollbar and some that don't. The visual effect of changing between these contents is kinda annoying though since when the window scrollbar pops into existence, it shifts the whole page left by just a little.
Things I've tried/considered:
always having scrollbar visible - it works but I don't like it.
setting the body width to 98% - apparently thats still 98% of the window which gets resized so still popping. Setting it to a pixel value works but people have different size screens.
compensating the window width loss with a script - was a fairly simple script but funny enough, the window resize triggered by scrollbar appearing doesn't trigger the resize event of the window and I havent found any other suitable event to attach it to.
Does anybody know a good technique for keeping the page container in place?
I guess you could add a class with margin/padding to the body and then remove it with jQuery. The downside of doing this is that different browsers have different width of the scrollbar and for instance safari on mac don't even have a visible scrollbar. So recommendation would be to just have the scrollbar visible all the time.
The correct answer is
html { width: 100vw; }
I'm writing a web page with Javascript. I have to somehow work with my DIV layer properties refer to page scaling.
How can I do this? You can find the example at apple page. Try to scale it and look at top menu.
EDIT: I thought scaling meant re-sizing the window. You meant zooming in and out, my bad.
The top menu on the apple site is a fixed with and will not scale with the re-sizing of the browser window. If you wanted to have that feature, you would have to assign a:
div {
width: %; //percentage value you want
min-width: px; //the minimum pixel value you want
}
This way it expands and decreases with the page width, yet maintains a min width for readability
Also, using em as a font-size will help keep the text size dynamic as well.
You will encounter this (or similar) behavior on virtually any site. Havent tested it in any other browsers but here is my answer to the same question concerning firefox.
You should use EM's for all you dimensions, so all you elements will scale (when font-size only scaling is enabled). So you can measure the font-size on elements to know it the text-zoom was modified or not.
There is no way to know if the page was zoomed by the browser or not (as i wrote, only if the text zoom is used)
here is a workaroud: it will only work if the font-size is zoomed
http://jsfiddle.net/gGdAq/4/
Basically if the width in Pixel of the element your interested in, is not the base font size * the width in em the page was zoomed.
Maybe this question helps:
Catch browser's "zoom" event in JavaScript