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!)
Related
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 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';
Browser support for page-break-inside: avoid is poor. There are lots of scenarios where it's not applied. In my case it's a nested flexbox with flex-wrap.
Is there any way to add a page break using javascript?
I can detect if the browser is in print mode with onbeforeprint event in FF, or window.watchMedia on Chrome, but what next?
I guess I need to find out what's the printed page size in pixels, so I can determine the position where to insert the page break. But window.screen.availHeight returns the same value and window.print.availHeight does not exist :(
Assuming this is possible somehow, how do I do the page break then?
You can try a calculation, A4 has a certain proportion between width and height, so simply said if your print css makes the html/body 900px width. The height for each print page can be calculated by using the A4 proportions.
So you can add a print css file that changes the layout so that the content that needs to be on the next page has a margin top.
I have to place the content of service provider in an iframe on parent website.
The height of the iframe content would dynamically change depending on user interaction.
Problem I face is that there is some extra height added to the iframe. I'm not sure where the height is coming from.
Any insight appreciated.
LINK TO PAGE
I don't believe this to be the fault of easyXDM.
It appears that the height being calculated is for the current width of the iframe. If you remove line 28 in your HTML file, you will see that the height is completely filled. (Or the following line) (Or you can leave the code as is, and disable the height style in your developer tools and see the result)
this.container.getElementsByTagName("iframe")[0].style.width = "500px";
Since it's hard to modify the code in the debugger, the next thing I would try is, setting the width to what you would like it to be prior to filling with content and a calculated height.
I had the same problem
When you do assign the height to the iframe element, don't assign it to all iframe. Because it affects iframes in the Ads and social media plugins.
So I did the following
$('#divID iframe').height(easyXDMmessage);
$('#divID iframe').width('100%');
In the case of empty iframes, I ran into an issue where if you set the height to 0px, the parent block element will still show at least one line of empty text. This is because iframes are actually inline elements, so their parent block will still show one line-height of text even if the iframe itself is zero height. Here's the simple fix:
iframe#my_iframe { display:block; }