I'm working on a small JavaScript library to make dynamic grids on websites. Anyway, things are going pretty well, except sometimes I notice a sizable white space at the bottom of my div in Chrome. This tends to pop up in two situations:
1) When the browser is open to it's full window size.
2) If the grid elements are small.
Here is the page style where it happens most.
Now, this is a problem because the JavaScript code is written specifically to take the window size, and create elements of the correct size to fill the screen. It works perfectly in Firefox.
If you check that out with Chrome with a full window, you'll notice a white space at the bottom. Then, if you resize the window to half-size or so, it disappears. Also relevant, this issue is not happening in Firefox at - no extra white space anywhere.
Here is a JS fiddle that should recreate the problem. Same deal, white space in Chrome (might need to resize the view window) and no white space in Firefox.
Any ideas out there about what might be the issue? I've read a lot of similar posts and poked around with a lot of the standard problems, such as border-box, vertical-align and things like that. I haven't gotten anywhere though.
EDIT: I've also done some debugging in the console. For example, checking the window height versus the height of the div versus the height of all the elements combined leads nowhere.
$(window).height()
=> 656
$('#patchwork').height()
=> 656
Patchwork.dimensions.Y
=> 656
Patchwork.patchSize.Y * Patchwork.patchCount.Y
=> 656
This is basically saying that everything thinks and expects to take up all 656 pixels, but for some reason it is not actually filling the entire space.
With a window height of 754 I got 13 patches, each with a height of 56 (outline excluded).
This tells me that you might not calculate the amount of patches per total height, 754 / 50 = 15.08.
If you do that instead and then spread the reminder (4 in this case) equal among the patches (in this case every 7:th patch), you will get both a full page and patches being as close to their set size as possible.
Notes:
Your span tag, <span class="white-space-remover"style="font-size:0px;visibility:hidden">.</span>, need to have a space char after the last qoute sign in the class name and the 's' in style (one never know how that effects the rest)
This link has some good reading about round-ups in css: Are the decimal places in a CSS width respected?
It also looks like the outline acts different in different browsers. Try drop that one and use a border instead, with border-box;
// add this instead of outline
.patch {
width: 50px;
border: 1px solid #fff
box-sizing: border-box;
}
/*
"border-box" makes the element have a total size of its set width
which means setting the border size to 1 will not change the
total width of the element, it will change the "inner width" to 48
*/
// to support IE7 (and lower) use this to get 50px element
.patch {
width: 48px;
border: 1px solid #fff
}
/*
and if you will add padding you need to re-calc the width as
paddings will affect the total width in the same way border does
*/
More reading about box-sizing: *{ box-sizing: border-box }
Related
When scrolling down a list under md-virtual-repeat there is an inconsistency between scroll and display speed. Items are not being displayed fast enough to keep up with the scroll speed. It also scrolls 'past the list' so that white space is displayed at the bottom (whereas it should have stopped scrolling).
See codepen: http://codepen.io/sweatherly/pen/PzKRLz
md-list-item, md-list-item ._md-list-item-inner {
min-height: 32px;
}
The problem is aggravated by changing min-height on "md-list-item, md-list-item ._md-list-item-inner" away from it's default value. On codepen, the problem is non-existent when the min-height is not changed (running on my local machine with Chrome it is worse but not terrible. However, it is more problematic at certain screen sizes).
I played with the CSS and googled for a few hours but found nothing that solved the problem. Any ideas?
I noticed a similar problem a while ago and came across the md-item-size attribute of md-virtual-repeat.
Its description in the docs is as follows:
The height or width of the repeated elements (which must be identical
for each element). Optional. Will attempt to read the size from the
dom if missing, but still assumes that all repeated nodes have same
height or width.
I've added this to your example
<md-list-item md-virtual-repeat="test in testings" class="repeated-item" flex="" md-item-size="48">
where 48 is the height of the md-list-item, and removed
md-list-item, md-list-item ._md-list-item-inner {
min-height: 32px;
}
CodePen
The scrolling appears to be smooth and without a white space at the bottom.
I also changed this CSS so that the scroll within the md-virtual-repeat-container works correctly
.md-virtual-repeat-container.md-orient-vertical {
height: calc(100% - 100px);
}
Got a series of quotes of varying length to fit in DIVs of fixed width but content determined height. I could individually position each DIV so it looked tidy and there were no vertical gaps. For example - http://www.zergnet.com/. I wondered if there was a CSS solution to problem, as I noted Zergnet uses inline styling and absolute positioning of every news teaser (which makes me think javascript is involved somewhere).
.testimonialBubble {
position: relative;
width:48%;
margin: 8px 0;
padding:0 2% 0 0;
float: left;
}
The idea being no matter what volume of content is thrown (within reason) into the divs in the 2 col layout they'll fit together and fill spaces. At the moment if the 2nd element is longer than the 1st, when 3rd element kicks round under the 1st element there's a gap between the two caused by the 2nd elements height. Is there a CSS only solution or is it only achievable via javascript?
Many thanks for reading.
I've been playing with the google apps console and it has a fluid page where there are grids of items. When the user makes the window bigger and smaller the width of the grid items gets smaller and smaller until it drops one onto the next row when it cant make each grid item any smaller.
Can anyone tell me what this technique is called so I can find some tutorials. For bonus points, does it require javascript?
The technique is known as liquid or elastic layout. It is achieved via CSS, no javascript required. If you're looking for tutorials, you might this article useful:
"70+ essential resources for creating liquid and elastic layouts" by Zoe Mickley Gillenwater
Most used method (at least by my observation) is floating div with width in percentage and css media style.
Example
.thumb {
float: left;
width:18%;
margin:1%;
background: #eee;
height: 200px;
}
#media (max-width: 724px) {
.thumb {
width:48%;
}
}
In example above div.thumb will have width of 20%(margin+width) meaning it will have 5 div per row. And if viewport has width of max 724px there will 2 divs per row.
There are a lot of methods for this but this is most easiest to do, if your div's have same height, otherwise you will have some glitches with float.
EDIT: here is jsfiddle http://jsfiddle.net/P2URP/
What you are looking for it's called fluid (or scalable, liquid, etc.) "tiles" better than "grid"
This other question may solve yours if you want to do it only with CSS: Fluid, flexible and scalable tiles to fill entire width of viewport
I have a div, where i need to keep the width & height constant and should not vary because of border & padding applied to it. I used border-box property. It is working upto some extend
div{
border:1px solid black;
width:100px;
height:100px;
-moz-box-sizing:border-box;
}
but failed in extreme case.
div{
border:60px solid black;
width:100px;
height:100px;
-moz-box-sizing:border-box;
}
This is actually online tool where user will give the border. So he can give any number but I want to prevent the div to grow with border/padding.
Is there anyway to prevent it either with CSS or javascript? Please tell me if I am wrong.
Well, the border will show on the left and right/top and bottom -- each being 60px, so that's 120px of border size total. The only way you'd be able to force the sizing to stay within 100px is to use JS to force the border to be <= width/height divided by 2.
it because your border size is bigger than your width and height
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
REFERENCE
http://dev.w3.org/csswg/css-ui/#box-sizing
Other than with JavaScript, there is no way to cap border width per se. Possible CSS-based solutions involve faking it.
For example, you could wrap a div around your bordered boxes with max-width and max-height, like this: http://jsfiddle.net/3k9Ac/ (That's not necessarily a great solution!)
Or you could build "borders" from other HTML elements, attaining the appearance of a border without being hampered by CSS mechanics--but if you're going that deep you might as well just use a little JavaScript.
Validating user input is really just the simplest and easiest approach. And you don't necessarily have to display an error message when users exceed reasonable border widths--instead, whenever user input exceeds a chosen maximum (say, 10px) you just default to that max.
I've put a little test case together here:
http://jsfiddle.net/D4sLk/2/
Basically I have the following font sizes set:
* (everything): 12px
container: 20px
test element: inherit
The DOM hierarchy is: container > test element.
In IE9, the font size is reported as 12px using testEl.currentStyle.fontSize but is displayed as 20px. In Chrome and FF it seems fine.
Are there any workarounds to this issue? Or have I done something really stupid?
Try using font-size: 1em instead of using inherit.
The reason for this is because I've found that inherit seems to have issues in IE. It rendered fine when I looked in IE9, however for some reason testEl.currentStyle.fontSize and $(testEl).css('font-size') both returned 12px as well.
I've read that to use font-size: inherit in IE8, you would need to specify a !DOCTYPE, however it should be fine in IE9 (http://www.w3schools.com/cssref/pr_font_font-size.asp). For some reason, testEl.currentStyle.fontSize and $(testEl).css('font-size') are not picking up the correct values in IE9.
When you set the font-size to 1em, you are sizing it up to 100% of the parent font-size, which in this case results to 20px. From http://www.w3schools.com/cssref/css_units.asp:
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
As a result, computedStyle.fontSize and $(testEl).css('font-size'), should both return 20px.
Hope this helps!