jquery ui tabs: get width of nested tabs on creation

Question

I have Master tab element with tab1 and tab2 . Where tab2 has another nested tab elements with subtab1 and subtab2 .

Initially master tab has only tab1 .Then tab2 , tab3 and so on .. are created dynamically and have subtab1 and subtab2 .

GOAL: I want to get width of nested tabs ( subtabs-* ) when they are created.Without having to select them or use any nasty events.

PROBLEM: I can get width of Mater tab with var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width(); But i can not get width of slave tab .

my guess is becuase when tab2 is created but not selected yet and hence subtab-* are not visible and thus width is zero. But subtabs have been created so there must be a way to get its width.

I was able to get widht of slave tab via atcive:event. But this is not my requirement. I need to get its width when it is created.

JSFIDDLE : HERE

HTML:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><a href="#tabs-2">tab2</a></li>
  </ul>
  <div id="tabs-1">
    some data
  </div>
  <div id="tabs-2">    
        <div id="subtabs">
          <ul>
            <li><a href="#subtabs-1">subtab1</a></li>
            <li><a href="#subtabs-2">subtab2</a></li>
          </ul>
          <div id="subtabs-1">
            some data
          </div>
          <div id="subtabs-2">
            some data
          </div>
        </div>    
  </div>
</div>

JS:

var $master = $("#tabs").tabs();
var $slave = $("#subtabs").tabs();

var master_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$master).width();
// For display purpose append to body or use console.log
$("body").append("Master : "+master_width+"<br>");
var slave_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$slave).width();
// For display purpose append to body or use console.log
$("body").append("Slave : "+slave_width);//returns zero

Answer 1

I don't think you can, the width isn't known until it's shown. There are some ways round this (see this answer: jQuery - Get Width of Element when Not Visible (Display: None) ).

But the easiest is to just select the tab and get the width, if you unselect it afterwards it shouldn't be visible to the user (although that may depend on the system/browser). This gets the length without any flicker on my system:

// Activate new tab 
var oldActive = $( "#tabs" ).tabs( "option", "active" );
$( "#tabs" ).tabs( "option", "active", 1 );

// Get the width
var slave_width = $("div.ui-tabs-panel:not(.ui-tabs-hide)",$slave).width();           
$("body").append("Slave : "+slave_width);

// Make the original tab active 
$( "#tabs" ).tabs( "option", "active",oldActive );

Fiddle (sorry for the ugly code to add the second tab)

Otherwise you might need to look at the answer I linked above which has lots of generic options. I would wonder if you can create the subtabs 'under' the top tabs (and so hidden), measure them and then add them to the second tab.