1. #1
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118
    Vote Rating
    1
    Carina is on a distinguished road

      0  

    Default BasicDialog in IE when container has position:absolute

    BasicDialog in IE when container has position:absolute


    hi,

    I was having troubles with the BasicDialog in IE and I hope this post could be helpful to others with the same problem. If this is the wrong place to post this or not a bug, please forgive me and just remove this thread.

    Problem: in Firefox the Dialog works just fine. In IE 6 & 7 it opens up, I see the content but I cannot move or close the dialog and it seems somehow disabled with a gray overlay. I can only resize the dialog, no other interaction is possible.

    Cause: This only occurs when the markup for the dialog is inside a div that has style="position:absolute".

    yui-ext version: 0.40 (nightly build downloaded on 15.1.2007).

    How to reproduce:
    Take the Hello World Dialog example and add a div with position absolute:

    Code:
    <div style="position:absolute;top:0px;"> 
        <!-- The dialog is created from existing markup.
             The inline styles just hide it until it created and should be in a stylesheet -->
        <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
        <div class="ydlg-hd">Hello Dialog</div>
        <div class="ydlg-bd">
    
            
            <div class="ydlg-tab" title="Hello World 1">
                
                <div class="inner-tab">
                     Hello...
    
    
    
                        <input type="button" id="theme-btn" value="Toggle Theme" />
                </div>
            </div>
    
            
            <div class="ydlg-tab" title="Hello World 2">
                <div class="inner-tab">
                ... World!
                </div>
            </div>
            </div>
        </div>
      </div>
    </div>
    Maybe that's useful for someone. Or maybe that's not a bug and just something I've missed (but I couldn't find anything related in the forum or the docs).

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The key is in "without this div, everything works fine".

    The dialog div must be in the document body, not any other nested element.

    http://www.yui-ext.com/manual/faq#i_...an_t_access_it

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118
    Vote Rating
    1
    Carina is on a distinguished road

      0  

    Default


    Aaah, thanks a lot, I didn't check the FAQs!! And I thought it was a bug because it works fine in Firefox...

    Unfortunately, I want to open the dialog from a jsp that is included in some kind of master jsp.
    I tried
    Code:
    dialog.el.insertAfter(document.body.lastChild);
    and
    Code:
    dialog.el.insertBefore(document.body.firstChild);
    But that seems to confuse IE: it enlarges the size of the document even when the dialog div is set to visibilty:hidden. This results in vertical scroolbars although the window is large enough for the (visible) content which is not very pretty (but I can't disable the scrollbars because I need them when there is more content).

    For now I have a workaround and add the dialog div in the master jsp under a certain condition. But that's no pretty solution, I hope I can come up with a better one...

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Why are you trying to insert part of the dialog in the dom? The process of creating the dialog inserts it into the dom.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Austria
    Posts
    118
    Vote Rating
    1
    Carina is on a distinguished road

      0  

    Default


    Due to the design of the rest of the application I want to define the dialog div the way in a place where it would be contained in a div that is positioned absolutely.

    This causes the problems I described earlier so I wanted to move it from this position to the end or the beginning of the body so that it is not wrapped in some other div. That works except for the side effects that I mentioned (the overall size of the document increases and I can see scrollbars where no scrollbars should be).

    This problem has already been discussed here:
    http://www.yui-ext.com/forum/viewtop...85f7af91ba4f8d, that's where I got the idea from.

    Maybe I'm missing something here (again...). Or maybe I should insert all the divs on the fly instead of creating the dialog out of existing markup. Didn't have the time to try that yet.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Can you put up a link demonstrating what you are doing?

Similar Threads

  1. BasicDialog with fixed position
    By khnle in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 8 Feb 2007, 11:31 AM
  2. Tree height container
    By pomata in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Jan 2007, 12:52 PM
  3. how to get grid object from the container div.
    By sayeed in forum Community Discussion
    Replies: 7
    Last Post: 26 Dec 2006, 7:43 PM
  4. getting grid data if we know container div
    By sayeed in forum Community Discussion
    Replies: 2
    Last Post: 26 Dec 2006, 3:51 AM
  5. Adjusting height of grid container
    By robert in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Oct 2006, 4:28 PM

Thread Participants: 3