How to resize elements to full fit parent elements (table cells) using jQuery?
I want to resize first children of an element to make this element to full fit parent element (table cell).
The problem... my elements are growing exponentially with table cell
- $('.control').each(function(index) {
var maxWidth = $(this).width() - ($(this).outerWidth(true) - $(this).width());
var firstElement = $(this).children(':first');
var firstElementInput = firstElement.children(':first');
var seccondElement = $(this).children(':nth-child(2)');
var seccondElementWidth = seccondElement.outerWidth(true);
var thirdElement = $(this).children(':nth-child(3)');
var thirdElementWidth = thirdElement.outerWidth(true);
var maxWidhFirstElement = parseInt(maxWidth - seccondElementWidth - thirdElementWidth - (firstElement.outerWidth(true) - firstElement.width()));
firstElementInput.css({ 'backgroundColor':'#FFFF99','width' : maxWidhFirstElement });
//console.log('maxWidth: '+maxWidth+' = maxWidhFirstElement: '+maxWidhFirstElement+', seccondElementWidth: '+seccondElementWidth+', thirdElementWidth: '+thirdElementWidth+' = '+ (maxWidhFirstElement+seccondElementWidth+thirdElementWidth));
});
You can see the code and result here:
http://radu.at/test/resizeissue.phpHow can I calculate the width and make the resize without forcing table to have a fixed layout?
The code to reproduce this problem:
- <!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>
<title>Controls grow exponentially</title>
<script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
table.fixedLayout {
table-layout: fixed;
}
.control {
border: dotted 1px #808080;
display: inline-block;
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.thirdElement input {
width: 40px;
}
.control span , .control a {
display: inline-block;
border: dotted 1px #FF0000;
}
p {
font-weight: bold;
}
</style>
<script type="text/javascript">
<!--
function resizeControls() {
$('.control').each(function(index) {
var maxWidth = $(this).width() - ($(this).outerWidth(true) - $(this).width());
var firstElement = $(this).children(':first');
var firstElementInput = firstElement.children(':first');
var seccondElement = $(this).children(':nth-child(2)');
var seccondElementWidth = seccondElement.outerWidth(true);
var thirdElement = $(this).children(':nth-child(3)');
var thirdElementWidth = thirdElement.outerWidth(true);
var maxWidhFirstElement = parseInt(maxWidth - seccondElementWidth - thirdElementWidth - (firstElement.outerWidth(true) - firstElement.width()));
firstElementInput.css({ 'backgroundColor':'#FFFF99','width' : maxWidhFirstElement });
//console.log('maxWidth: '+maxWidth+' = maxWidhFirstElement: '+maxWidhFirstElement+', seccondElementWidth: '+seccondElementWidth+', thirdElementWidth: '+thirdElementWidth+' = '+ (maxWidhFirstElement+seccondElementWidth+thirdElementWidth));
});
}
$(document).ready(function() {
resizeControls();
});
var resizeTimer = null;
$(window).bind('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeControls, 100);
});
//-->
</script>
</head>
<body>
<p>I want to resize first children of an element to make this element to full fit parent element (table cell).</p>
<p>A. Bad Rendering, first children grow exponentially</p>
<table width="100%" border="1">
<tr>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
</tr>
<tr>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
</tr>
</table>
<hr />
<p>B. Good Rendering using "table-layout: fixed;"</p>
<table class="fixedLayout" width="100%" border="1">
<tr>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
</tr>
<tr>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
<td><span class="control"><span class="firstElement"><input type="text" value="01/01/2101" /></span><a class="seccondElement"><img src="DatePicker.gif" width="29" height="15" alt="DatePicker" /></a><span class="thirdElement"><input type="text" value="11:00" /></span></span>
</td>
</tr>
</table>
<hr />
<p>1. How to solve case A. to act like in case B. without forcing table to have a fixed layout?</p>
<hr />
</body>
</html>