Tabs within display:none get empty labels - Ext JS

#2 03-13-2007, 02:22 AM

display:none for any component which does sizing calculations isn't supported. There are a few alternatives to display:none which aren't so volatile, I would recommend trying an alternative. Like, using a hidden class.

.hidden {
    visibility:hidden;
    position:absolute;
    top:-2000px;
    left:-2000px;
}

#3 03-13-2007, 02:30 AM

You rock, Jack!

Here's the modified version, using the Element toggleClass method (just in case anyone is banging their heads on this like I've been):

<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<link rel='stylesheet' type='text/css' href='/ext-1.0-alpha3/resources/css/ext-all.css' />
<link rel='stylesheet' type='text/css' href='/unauthenticated/layout.css' />
<script type='text/javascript' src='/ext-1.0-alpha3/yui-utilities.js'></script>
<script type='text/javascript' src='/ext-1.0-alpha3/ext-yui-adapter.js'></script>
<script type='text/javascript' src='/ext-1.0-alpha3/ext-all.js'></script>
<title>Tabs Test Page</title>
</head>
<body>
<script>
// Open or close a hidden section
function hidden_opener(divid)
{
var divobj = Ext.Element.get(divid);
divobj.toggleClass("hidden");
}
</script>

<script>
Tabs = function() {
  return {
    init : function(){
      var tabs = new Ext.TabPanel('simplemode');
      tabs.addTab('simple', "Basic mode");
      tabs.addTab('complex', "Advanced mode");
      tabs.activate('simple');
    }
  }
}();
Ext.EventManager.onDocumentReady(Tabs.init, Tabs, true);
</script>
<style>
.hidden {
    visibility:hidden;
    position:absolute;
    top:-2000px;
    left:-2000px;
}
</style>
:hidden_opener('hiddendiv')" target="_blank">Open/Close
<div id='hiddendiv' class="hidden">
  <div id='simplemode'>
    <div id='simple' class='tab-content'>
      Blah Blah
    </div>
    <div id='complex' class='tab-content'>

      Nah Nah
    </div>
  </div>
</div>
</body></html>