1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    209
    Vote Rating
    0
    Bobafart is on a distinguished road

      0  

    Default Bug in Dialog Render

    Bug in Dialog Render


    I noticed that when I display a dialog in FF the bottom "close" button gets cut off. It is fine in MIE.


    cut off bottom in FF 1.5.0.9



    looks fine in MIE 7.0.5



    when you resize the window in FF it goes away. a force-refresh brings it back.

    hopefully it isn't something I am doing incorrectly from my end.

    here is a live example: http://www.gabbr.com/sandbox/yahooui/yahoodialog8.php

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

      0  

    Default


    You're specifying autoCreate:true, but passing an existing div name - that will result in duplicated ids, and we know that's wrong!

    Remove the <div id="dialog"... element.

    Then use dial.header to get the header Element to update and dial.body to get the body element to update.

    Your probs could be to do with that.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    209
    Vote Rating
    0
    Bobafart is on a distinguished road

      0  

    Default


    I even specified autocreate: false to no avail

    does anyone else know why this problem occurs?

    i still havent been able to solve it.. any help would be appreciated

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

      0  

    Default


    Dialog should be rendered to the body, not nested inside another div. Try moving the div outside the wrapper div.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    209
    Vote Rating
    0
    Bobafart is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    Dialog should be rendered to the body, not nested inside another div. Try moving the div outside the wrapper div.
    man, I can't believe how many hours I have spent on this thing.. I took all your suggestions, made modifications and it just doesnt work. Same problem also occurs in FF v2.0

    playing around with the width/height/minwidth/height doesn't change it either.

    I dumped the <div id="dialog"> -- to no avail.

    I followed the "Hello World" dialog in the documentation as well and still get the error.


    I even made a "vanilla" version -- I stripped all the div's (except for the dialog divs) -- and still have the same display issue/bug:

    vanilla version:

    http://gabbr.com/sandbox/yahooui/yahoodialog10.php

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

      0  

    Default


    Try adding the footer div to your dialog layout e.g
    Code:
    <div class="ydlg-ft"></div>
    I think there's a bug in Dialog when the footer isn't there, and the addButton logic tries to add it.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    209
    Vote Rating
    0
    Bobafart is on a distinguished road

      0  

    Default


    I added the footer-- no change:

    http://gabbr.com/sandbox/yahooui/yahoodialog10.php

  8. #8
    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


    This is fixed in my local trunk. The problem is the buttons are "float:right" and therefore don't take up space (some times).

    I fixed it by adding this line right before the call to syncBodyHeight() (near the end) in BasicDialog.addButton().

    this.footer.setHeight(this.btnContainer.offsetHeight + this.footer.getPadding('tb'));

    This also fixed it in IE6 strict mode.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    209
    Vote Rating
    0
    Bobafart is on a distinguished road

      0  

    Default


    Quote Originally Posted by jacksloc
    This is fixed in my local trunk. The problem is the buttons are "float:right" and therefore don't take up space (some times).

    I fixed it by adding this line right before the call to syncBodyHeight() (near the end) in BasicDialog.addButton().

    this.footer.setHeight(this.btnContainer.offsetHeight + this.footer.getPadding('tb'));

    This also fixed it in IE6 strict mode.
    doh! I spent so long on this trying to figure out the problem... having no idea that buttons are float:right! damn...

    what div does 'tb' refer to? the body dialog div? the footer?

    also syncBodyHeight() is nowhere in createDialog -- and I don't see it in the docs either.. can you elaborate please?

    do you have a working example that I can see live?

  10. #10
    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


    syncBodyHeight is a private method in BasicDialog.js

    Take a look at Element.getPadding(). Like other functions in Element, it accepts a standard set of "sides" as a string. getPadding("tb") means parse and sum the padding-top ('t') and padding-bottom ('b').

Similar Threads

  1. Header does not render if div is not visible.
    By zeek in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 5 Mar 2007, 11:05 AM
  2. Re-render BasicDialog with different content
    By kalebwalton in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 6 Feb 2007, 12:37 PM
  3. View in a dialog won't render
    By slidenv in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 5 Jan 2007, 12:01 AM
  4. Checkbox render
    By alex1er in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Nov 2006, 6:56 AM

Thread Participants: 4