Results 1 to 3 of 3

Thread: Child Elements rendering with visibility:hidden

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256

    Default Child Elements rendering with visibility:hidden

    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:

    HTML Code:
    <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:

    HTML Code:
    <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..)

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    7

    Default

    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.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •