Tabs within display:none get empty labels - Ext JS
5080 ワード
Hi Jack and all,
When I build a TabPanel inside of a hidden div (display:none). This behavior is different from previous releases up to 1.0alpha2 (though behavior wasn't what I expected in those versions either). Seems like a bug, but when I mentioned those problems in earlier versions in the bugs forum it was moved to help--so maybe it's actually intended behavior?
Here's the code to reproduce the problem:
If the div starts display: inline, the problem doesn't exhibit.
Am I just going about things all wrong? (I don't get to decide when elements get added to the display, so I can't draw the tabs when the div gets opened out.)
Thanks for any pointers you can provide.
#
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.
#
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):
When I build a TabPanel inside of a hidden div (display:none). This behavior is different from previous releases up to 1.0alpha2 (though behavior wasn't what I expected in those versions either). Seems like a bug, but when I mentioned those problems in earlier versions in the bugs forum it was moved to help--so maybe it's actually intended behavior?
Here's the code to reproduce the problem:
<!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);
var dh = Ext.DomHelper;
if (divobj.getStyle("display")=="inline") {
dh.applyStyles(divid, "display:none");
}
else {
dh.applyStyles(divid, "display:inline");
}
}
</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>
:hidden_opener('hiddendiv')" target="_blank">Open/Close
<div id='hiddendiv' style="display: none;">
<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>If the div starts display: inline, the problem doesn't exhibit.
Am I just going about things all wrong? (I don't get to decide when elements get added to the display, so I can't draw the tabs when the div gets opened out.)
Thanks for any pointers you can provide.
#
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>