Issue with order of computation for elastic-height
beekay
Here's a bare bone snippet of my layout page. I am using elastic-
height to use full-page height. However, what I have observed is that
elastic evaluates the elastic-height after it evaluates inner
elements. So in this case, elastic-height of #view gets evaluated
after width of the elastic-column of inner element #container is
computed. This causes, incorrect computation in case if the #container
has any borders; Currently, I am working around this issue by putting
border for #view instead of the #container. Is this more by design?
Regards
Bhavin
<!DOCTYPE html>
<html>
<head>
<title>Pulse</title>
<link href="/stylesheets/elastic.css?1302251724" media="screen"
rel="stylesheet" type="text/css">
<link href="/stylesheets/elastic.print.css?1302251732" media="print"
rel="stylesheet" type="text/css">
<script src="/javascripts/jquery.js?1302096594" type="text/
javascript"></script>
<script src="/javascripts/elastic.js?1303382496" type="text/
javascript"></script>
<style type="text/css">
/*<![CDATA[*/
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
html, body {
width: 960px;
margin: 0 auto;
height: 100%;
}
#top-nav {
height: 100px;
background-color: #00008b;
color: white;
}
#view {
/*border: thin solid black;*/
height:100%;
}
#container {
border: thin solid black;
height: 100%;
}
#side-nav {
border-right: thin solid black;
width: 250px;
height: 100%;
}
/*]]>*/
</style>
</head>
<body class="unit">
<nav id="top-nav">
</nav>
<div id="view" class="unit elastic-height">
<div class="unit on-2 columns" id="container">
<div class="fixed column" style="width:150px" id="side-nav">
Side Nav
</div>
<div class="elastic column" id="content">
<span>lorem epsum</span>
</div>
</div>
</div>
</body>
</html>
fernando trasvina
the problem relies on the border of the #side-nav element
elastic does the elastic height by design after processing widths and after some other helpers.
the thing with the border on the columns is that the computations are a lil faster because you have less data to process
so the basic change is remove the border from the #side-nav and put it on the #side-nav > .container element
here the code:
<!DOCTYPE html>
<html>
<head>
<title>Elastic height</title>
<link rel="stylesheet" type="text/css" media="all" href="elastic.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="elastic.js"></script>
<style type="text/css">
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
html, body {
width: 960px;
margin: 0 auto;
height: 100%;
}
#top-nav {
height: 100px;
background-color: #00008b;
color: white;
}
#container {
border: thin solid black;
}
#side-nav {
width: 250px;
height: 100%;
}
#side-nav > .container{
border-right: thin solid black;
height: 100%;
}
</style>
</head>
<body>
<nav id="top-nav">
</nav>
<div class="unit elastic-height on-2 columns" id="container">
<div class="fixed column" style="width:150px" id="side-nav">
<div class="container">
Side Nav
</div>
</div>
<div class="elastic column" id="content">
<span>lorem epsum</span>
</div>
</div>
</body>
</html>
On Apr 28, 2011, at 10:33 AM, beekay wrote:
> <!DOCTYPE html>
beekay
OSX 10.6.7. Infact even my html snippet works fine there. But in
Chrome Dev build 12.0.742.12 when run within the same OS, both yours
as well as my example breaks. When I ran the debugger, it appeared to
me that during the order of computation, elastic height is computed
after elastic width of the inner container. This is causing the inner
width to exceed by 2px (right and left border size).
I am sending the debug screenshot to your persoinal email for your
ref. Note the #container height and #content width in the debug watch
expression window. Hope thats fine with you.
/b:k