PDA

View Full Version : Child Elements rendering with visibility:hidden



brookd
29 Jul 2011, 6:08 AM
I just finally got around to upgrading from Ext 3.2.1 to Ext 3.4. The problem is that I now seeing a lot of visibility:hidden styles on child elements.

For example, I have a window with a table layout, inside the table is a form and the form is not visible. Looking at the source I see its got visibility:hidden:



<div id="loginform" class=" x-panel x-panel-noborder x-form-label-left">
<div id="ext-gen69" class="x-panel-bwrap">
<form id="ext-gen46" class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-form" method="POST"
style="background-color: transparent; visibility: hidden; opacity: 1;">
.....
</form>
</div>
</div>


In another example, the Ext.MessageBox dialog renders with the middle portion and right side border missing (I can see the shadow el), looking at the source I can see one of the child divs got visibility:hidden:



<div id="ext-comp-1007" class=" x-window x-window-plain x-window-dlg" style="position: absolute; z-index: 9003; visibility: visible; left: 910px; top: 368px; width: 100px; display: block;">
<div class="x-window-tl">
<div id="ext-gen12" class="x-window-bwrap">
<div class="x-window-ml">
<div id="ext-gen47" class="x-window-mr" style="visibility: hidden; opacity: 1;">
</div>
<div id="ext-gen15" class="x-window-bl">
</div>
<a id="ext-gen20" class="x-dlg-focus" tabindex="-1" href="#">&nbsp;</a>
</div>


(Note, this might not be the complete HTML). The key point is that visibility:hidden is applied to these child elements and I am not sure why. The same code worked perfect in Ext 3.2.1.

Anybody seen this happening? I am seeing this in IE9 and FF4 (have not tested further..)

jisaac01
1 Aug 2011, 9:51 AM
I'm having a similar problem in IE9 only. The messageBox renders missing its border. It's not happening in FF, so I have no idea if the images are loading too slowly or if they have visibility:hidden.

I also just upgraded from Ext3.0 to 3.4.

The code to produce this is simple:
Ext.MessageBox.wait('', 'Uploading...');

If I try again on the same page, or run it in the console, there is no problem. Seems to be only the first time.

brookd
1 Aug 2011, 10:57 AM
On my end, I think its an issue with my own CSS or something. Cause if I take it all out, then it works. So it may be a broken CSS selector or some bad syntax somewhere. Thats where I am leaning towards anyways, but have not found the solution.