Because the elements are not shown yet. Heights will be not correct. You need to listen for the tab to be loaded
$( ".selector" ).on( "tabsload", function( event, ui ) {
//set height here
} );
Question
Using jQuery UI, I am loading tables into a div with tabs. When a tab is clicked, I need to change some CSS properties on the th and tr elements. Technically, everything works but when I click a tab, the CSS properties are only changed on the the th elements. I have to click the tab again for the changes to be made to the tr elements. I need both changes to happen when the tab is clicked. Here is my function:
var setHeadingHeight = function() {
$('.ui-tabs-nav li a').click(function() {
var getHeadingHeight = $("#new-locations-tabs .ui-tabs-panel:visible .right-table th").css("height");
var getRowHeight = $("#new-locations-tabs .ui-tabs-panel:visible .left-table tr").css("height");
$("#new-locations-tabs .ui-tabs-panel:visible .left-table th").css("height", getHeadingHeight);
$("#new-locations-tabs .ui-tabs-panel:visible .right-table tr").css("height", getRowHeight);
});
};
Edit: Updated code with tabsload, stil nothing.
$( "#new-locations-tabs" ).on( "tabsload", function( event, ui ) {
$('.ui-tabs-nav li a').click(function() {
var test = $("#new-locations-tabs .ui-tabs-panel:visible .right-table th").css('height');
var testa = $("#new-locations-tabs .ui-tabs-panel:visible .left-table tr").css('height');
$("#new-locations-tabs .ui-tabs-panel:visible .left-table th").css("height", test );
$("#new-locations-tabs .ui-tabs-panel:visible .right-table tr").css("height", testa);
});
});
La solution
Because the elements are not shown yet. Heights will be not correct. You need to listen for the tab to be loaded
$( ".selector" ).on( "tabsload", function( event, ui ) {
//set height here
} );