I have a div with different tabs each containing a table. Content is going to be dynamically loaded into each table so I need a way to set the height of the th and tr elements of each table equally. For example, if table1 has a th height of 50px than table2 will also need to have a th height of 50px.
The code I am using works but for some reason it added one pixel the height of each element on each tab switch. For example, if I click on the second tab all tr elements will be 50px. If I click to the first tab and then back to the second tab, the tr elements will change to 51px tall. If I click back to the first tab and then the second tab, the tr elements will change to 52px tall etc. etc.
Here is my code:
$( "#new-locations-tabs" ).tabs({
activate: function(events, ui) {
var getHeadingHeight = $("#new-locations-tabs .ui-tabs-panel:visible .right-table th").css("height");
$("#new-locations-tabs .ui-tabs-panel:visible .left-table th").css("height", getHeadingHeight);
var getRowHeight = $("#new-locations-tabs .ui-tabs-panel:visible .left-table td").css("height");
$("#new-locations-tabs .ui-tabs-panel:visible .right-table td, #new-locations-tabs .ui-tabs-panel:visible .left-table td").css("height", getRowHeight);
}
});
"Note that the computed style of an element may not be the same as the value specified for that element in a style sheet."
There's probably some calculation rounding happening. Try using height()
or outerHeight()
instead.
"The difference between .css( "height" ) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation."