IE + Tabs + Grid = Disappearing Content

[dragontree]

I've created two tabs with a grid of data in each and when switching between tabs in IE-only, the content disappears. If I mouseover, scroll in the grid or force a refresh the grid reappears (line-by-line in the case of a mouseover).

Any suggestions?

[tryanDLS]

Are you using the latest code? This may be related to the IE layout bug that was recently fixed.

[dragontree]

Are you using the latest code? This may be related to the IE layout bug that was recently fixed.

I'm using the public release 1.0.1a. Is the fix included in this release?

[tryanDLS]

I think so, but I can't confirm - hopefully Jack will confirm. In the meantime you might take a look at this thread

[dragontree]

I think so, but I can't confirm - hopefully Jack will confirm. In the meantime you might take a look at this thread

Unfortunately, this didn't solve my problem. Here's a bit of my code that causes the issue:

Ext.onReady(function(){
var tabs = new Ext.TabPanel('tabs1');
commentsTab = tabs.addTab('reviews', 'Reviews (0)');
updatesTab = tabs.addTab('updates', 'updates (0)');
tabs.activate('reviews');

<instatiate datastore for review>
<create grid for reviews>
<load review datastore>

<instatiate datastore for updates>
<create grid for updates>
<load updates datastore>

});

Any suggestions would be very, very appreciated...

[dragontree]

Issue resolved by removing 'style="width:720px;"' on second div (highlighted in bold/red)..

------------------
<div id="tabs1">
<div id="reviews" class="tab-content">
<div style="width:720px;" class="x-box-blue">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">

<div id="grid-comments" style="border:1px solid #99bbe8;overflow: hidden; width: 690px; height: 300px;"></div>

</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>
<div id="updates" class="tab-content">
<div style="width:720px;" class="x-box-blue">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">

<div id="grid-updates" style="border:1px solid #99bbe8;overflow: hidden; width: 690px; height: 300px;"></div>

</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>
</div>