I understand that different browsers are likely to have different ceiling values, but what is a good rule of thumb for the maximum render-able CSS height/width in a given browser?
For example, this trick:
.parent{
overflow: hidden;
}
.column{
float: left;
}
.max-height{
margin-bottom: -30000px;
padding-bottom: 30000px;
}
<div class="parent">
<div class="column">
</div>
<!-- given a background color, this div will appear to expand to 100% the
parent height -->
<div class="column max-height">
</div>
</div>
I know it's nearly stupid, but if a page were to expand beyond 30000px, now the trick doesn't work.
I've seen 32768px used in various places; is this due to higher values being unreliable, or just because its a nice square number?
I'd be tempted to have a look at what values can be returned from javascript in the screen object available height
<script type="text/javascript">
document.write("Available Height: " + screen.availHeight);
document.write("Available Width: " + screen.availWidth);
</script>
Using jquery you could set the body height and width to these values using the .css function if you pass them in as variables such as.
var screenHeight = screen.availHeight
of course this assumes if javascript is enabled on the clients browser
Related
I am learning bootstrap and I tried to use the HERE maps based on this example from HERE
I realized, that to be able to use relative height (e.g. height: 50%) I have to make the css styles like that:
html, body {
height: 100%;
width: 100%;
}
#map {
width:100%;
height: 100%;
margin:0 auto;
}
Now I would like to create two columns with bootstrap, left for itinerary and right for the map view.
<div class="container">
<div class="row">
<div class="col-sm-4">
Here comes the itinerary
</div>
<div class="col-sm-8" id="map">
</div>
</div>
I quickly realized, that I have to use absolut size for the map element (e.g. width: 400px), otherwise the map is not displayed at all (when using height: 100%;) or the columns are stack from the beginning (using width: 100%;)
I suspect, that the reason for this lies in the width/height styling of the parent elements (row, container), but I do not know the right solution.
I also know, that after getting the styling right I need to take care about the automatic adapting of the maps size on window resize, but I would like go get the right styling first.
From earlier reply from HERE support
"try this after the map object initialization:
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
That should solve the problem.
How to redraw Here Map when container resizes?"
I'm trying to format a slide in a bootstrap that has the format of the following fiddle: fiddle
The two divs with "hidden" in them are meant to disappear when on desktop so that when someone is using a tablet or phone they stack on top of each other. This works fine in the fiddle where the height is set to a fixed number
height: 100px;
But I don't want to set the height this way. If I remove this line you can see in the fiddle that "hidden2" drops down in a weird way instead of acting as a spacer for the text content on the bottom. I've also noticed if I remove the img tag the grid works fine.
I'm not sure why it does this and with real content it just looks like there's no spacer and all the text hugs the left side. Any ideas?
Edited: You can have a width of the content so there is space on both sides, and using the bootstrap grid system drop the text content down.
HTML
<div class="whole">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="http://placehold.it/100x100"/>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">text content</div>
</div>>
CSS
div {
height: 100px;
background: red;
border: 1px solid black;
text-align: center;
}
img {
border-radius: 50%;
}
.whole {
margin: 0 10%;
width: 80%;
}
As much as i understood from your question, you're trying to preserve the functionality found on the fiddle link you provided, but also preserving equal heights. I also understand that you do not want to assign the height manually (i.e in your case, hard-coded).
There are two ways of approaching the solution: Javascript or CSS3.
Javascript:
I usually wouldn't solve layout issues with Javascript, but since your scenario has more than one row invloved, the easy way is JavaScript. With the help of jQuery, you can iterate through the div elements, having an initialized variable (example: var bHeight = 0). Check for each element's height; if it's greater, assign it to bHeight.
Your code should something like this:
$(document).ready(function(){
var bHeight = 0;
$("div").each(function(){
if($(this).height() > bHeight)
bHeight = $(this).height();
}); //end of loop
//now, assign height to all
$("div").height(bHeight);
});
This method will allow you to assign the height of your columns dynamically.
CSS3:
A little research online cold introduce you to the CSS3 display: flex, yet it's totally up to you to decide regarding browser support (CSS flex Property), and more details on solving your issue here: (A Complete Guide to Flexbox)
I have a square image within .img-container. Sometimes it takes a few seconds for an image to load and the .img-container collapses and only takes the full height when the image loads. However, I would like it to keep the full height (as if the image is there) while the image is loading.
I would've easily done this by setting a min-height on img-container class, however it's a fluid grid and the image is responsive (notice bootstrap's img-responsive helper class) which makes it hard to set the min-height to an appropriate value for different screen sizes (although achievable with media queries as a last resort).
Solving this by putting a placeholding image sounds like an overkill (especially performance wise on mobile). Also, not sure what would load first then, the placeholder image or the actual image.
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card">
<span class="img-container thumbnail clearfix">
<img alt class="pull-left img-responsive" src="http://...">
</span>
<div class="caption">
<a href="http://.." class="card-title lead">
Some text
</a>
</div>
</div>
</div>
EDIT DUE TO COMMENT
If you do not specify a source at all (not even a dummy, temporary one), the browser will not even try to "guess" the image's height, and so it collapses. If you know the ratio of the image (it's obviously 1:1 in case of a square picture), you can use the following trick to preoccupy the space, and scale the image along with the div.
Set the following CSS:
.test-div-inner {
padding-bottom:100%;
background:#EEE;
height:0;
position:relative;
}
.test-image {
width:100%;
height:100%;
display:block;
position:absolute;
}
Then you can use the following HTML:
<div class="test-div-inner">
<img class="test-image" src="http://goo.gl/lO9SUU">
</div>
Here is the working example: http://jsfiddle.net/pQ5zh/3/
Note that the fiddle contains another div element, this is only required if you would like to give it all a padding or border, since the padding-bottom calculates the padding in pixels based on the width of the div INCLUDING THOSE PARAMETERS, which is NOT the effect we want to achieve (the image would be a little taller than it should be).
For non-square images:
If you would like to change the ratio of the picture, just change the padding-bottom of the container div accordingly. For example, if you would like to place an image with a ratio of 2:1, change the padding to 50%. To keep it short: the ratio of the container div's width and padding should always be equal to the ratio of the image's width and height.
There is an easy way to do exactly this, but it only works for square images.
Specify the width of the image (using CSS) to be 100%. This way the browser will automatically assume that the image height is the same as it's width, and preoccupy the place.
http://jsfiddle.net/pQ5zh/2/
.test-image {
width:100%;
}
Note: There is a way to achieve this for non-square images too, but that is a bit more complicated.
EDIT: See above.
Ok, assuming all images are square, we can do it. Add an extra div around your image like this:
<div class="img-container">
<div class="image-wrap">IMAGE HERE</div>
</div>
Then we want CSS along the lines of
.img-container {
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;
}
.img-container:before{
content: "";
display: block;
padding-top: 100%;
}
.image-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
See this in action:
http://jsfiddle.net/jamesking/LNvmY/
You'll want to remove the width set in .img-container
I've attached a screenshot with this question. There are three columns and I want to keep the height of all the three columns exactly same. I managed to keep the width same with width css property now i wanted to adjust to height. Can anyone help me out in this regard. Thanks in advance.
I would use the following CSS to achieve this:
.wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.column {
display: table-cell;
}
With table-layout: fixed you're telling every child elements with display: table-cell to have same width, equally distributed based on wrapper's width, as well equal height.
Demo
In pure CSS you can use CSS3 columns: for a 3-column layout just try with
<div style="columns:3">...</div>
(with both -moz- and -webkit- prefixes)
See https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts for the reference, in particular about the height balancing:
Height Balancing
The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.
There is actually no right, cross browser way to do this, but rather you have to resort to some hacks.
A method I have used previously is to wrap the three columns inside a container and set a custom background to the hole container. Basically you create an image, having the same width of the website, having the two vertical lines, and you set it as the background of the container.
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style> .wrapper { background-image: url(wrapper-bg.png); } </style>
You could use a javascript library like http://www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200 to achive this. This method however does not work if, the hight of the columns is dinamically changing in height (e.g. you have a collapsable item in it). Of course you can handle this cases by handling those events and recalculating the hight.
Finally you could use height: 100%. It's not as simple as it seems however! This solution does only work for block elements and the size of the parent has to be known. So, if you know the size of the website in advance you can do something like the following:
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style>
.wrapper { height: 1000px; width:900px; }
.column { width:300px; float:left; height: 100%; }
</style>
Hopefully this will become simpler in future....
I have a list of dynamically generated divs that represent panels for selecting various options. There are two types of divs, regular ones and short ones. The height of the regular divs is set with javascript to te height of the tallest one. Additionally, if the height of te short div is less than half of the maximum it is set to half of that height, otherwise it is set to the full height.
What I would want to do now (preferably with CSS) is to list those items in such a way that if there is enough space, to put one short div below another sort div.
Here are some illustrations to hopefully make things clearer:
As far as I can see, this is not possible purely with CSS: If you provide the small boxes with clear: left, they will appear below all others. If you don't, they will appear next to each other.
The simplest workaround I can think of is to manually group two small boxes into a separate div. Here's a working example:
<html>
<head>
<style type="text/css">
div.large, div.small { width: 40px; margin: 5px; }
div.large { height: 95px; background-color: blue; }
div.small { height: 45px; background-color: red; }
div.large, div.smallblock { float: left; }
</style>
</head>
<body>
<div class="large">1</div>
<div class="large">2</div>
<div class="smallblock">
<div class="small">3</div>
<div class="small">4</div>
</div>
<div class="smallblock">
<div class="small">5</div>
<div class="small">6</div>
</div>
<div class="large">7</div>
</body>
</html>
There is no generic pure CSS solution.
See a previous answer of mine for a comparison of the candidate techniques:
CSS Floating Divs At Variable Heights
Unless you can use server-side code to manually calculate pixels and use position: relative / position: absolute; top: ?px; left: ?px, you will have to resort to JavaScript to handle the positioning.
This jQuery plugin is generally a good solution: jQuery Masonry
There's also a raw JavaScript version: Vanilla Masonry
I find myself recommending it somewhat regularly:
https://stackoverflow.com/search?q=user%3A405015+masonry
Some possibly relevant demos:
http://desandro.com/demo/masonry/docs/filtering.html
http://desandro.com/demo/masonry/docs/animating-jquery.html
http://desandro.com/demo/masonry/docs/appending.html