PDA

Click to See Complete Forum and Search --> : need elastic div

lakshmi.megh
04-02-2010, 01:20 PM
I have this code, need to expand and contract the div according to its content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outerdiv{
background-color:#CCC;
padding:5px;
overflow-x:auto;
overflow-y:hidden;
min-height:40px;
}
</style>
</head>
<body>
<div class="outerdiv">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
</tr>
</table>
<div style="clear:both"></div>
</div>
</body>
</html>
skywalker2208
04-02-2010, 05:31 PM
Take out the over-flow style tags and it will expand to the right of the page for however long your table is.
tirna
04-03-2010, 04:35 AM
This works in IE8.

I've put a 1px red border around the div so you can see it's rendered width.

I don't have time to test it in other browsers.

Happy Easter :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.outerdiv{
border: 1px solid red;
background-color:#CCC;
padding:5px;
min-height:40px;
}
</style>

<script type="text/javascript">
<!--
window.onload = function() {
//get the actual table width
var tableWidth = document.getElementById("tbl").clientWidth;
//set the div width to the table width
document.getElementById("outerdiv").style.width = tableWidth;
}
//-->
</script>

</head>
<body>

<div id="outerdiv" class="outerdiv">

<table id="tbl" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center">qwertyuiop<br />zxcvbnmnbvc</td>
<td align="center">qwertyuiop<br />zxcvbnmnbvc</td>
<td align="center">qwertyuiop<br />zxcvbnmnbvc</td>
<td align="center">qwertyuiop<br />zxcvbnmnbvc</td>
<td align="center">qwertyuiop<br />zxcvbnmnbvc</td>
<td align="center">qwertyuiop<br />zxcvbnmnbvc</td>
</tr>
</table>

<div style="clear:both"></div>

</div>

</body>
</html>
lakshmi.megh
04-07-2010, 10:18 AM
I need the overflow since I want horizontal scroll but not the vertical scroll. But my problem is when the scroll is not there I dont want there to be a blank space showing at the bottom edge which stays there even after the horizontal scroll is not there. I know I am trying to do something unnatural to the div but that what I need to have. Thinking of manipulating the div somehow to not to leave a space at the bottom when the horizontal scroll is not there.
lakshmi.megh
04-07-2010, 10:25 AM
Thanks Tirna, very few people make the effort which you have shown to actually give a whole example, I really appreciate that. I need this code only for IE 7 and not any other browser. I liked your code but I am going to have content below this div which should not have a horizontal scroll so your solution will not work for me. I need to manipulate the div and not the browser. Let me know if you can make the div adjust to the content inside, here adjusting means that, no vertical scroll, only horizontal scroll is allowed. There is going to be dynamic data displayed in the td's, so if the data is less there will be no scroll and when the data increases, auto horizontal scroll will appear. My problem is when there is no scroll, the div leaves a space below which I dont want, as it messes up my layout.
lakshmi.megh
04-07-2010, 10:34 AM
This is how it looks with scrollbar:
------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outerdiv{
background-color:#CCC;
padding:5px;
overflow-x:auto;
overflow-y:hidden;
min-height:58px;
}
</style>
</head>
<body>
<div class="outerdiv">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
</tr>
</table>
<div style="clear:both"></div>
</div>
</body>
</html>
------------------------------------------------------------------------

This is how it looks without scrollbar:
------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.outerdiv{
background-color:#CCC;
padding:5px;
overflow-x:auto;
overflow-y:hidden;
min-height:58px;
}
</style>
</head>
<body>
<div class="outerdiv">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
<td align="center">asdfsdfsdfsa<br />asdfsdfsdfsa</td>
</tr>
</table>
<div style="clear:both"></div>
</div>
</body>
</html>
lakshmi.megh
04-07-2010, 10:36 AM
Take out the over-flow style tags and it will expand to the right of the page for however long your table is.
I need the overflow since I want horizontal scroll but not the vertical scroll. But my problem is when the scroll is not there I dont want there to be a blank space showing at the bottom edge which stays there even after the horizontal scroll is not there. I know I am trying to do something unnatural to the div but that what I need to have. Thinking of manipulating the div somehow to not to leave a space at the bottom when the horizontal scroll is not there.