1. #1
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    161
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Default [2.2][Webkit] Using html as the message in Ext.Msg makes the box too narrow

    [2.2][Webkit] Using html as the message in Ext.Msg makes the box too narrow


    I was using an html list as the msg cfg option to Ext.Msg.show and things were working fine in IE and FF but when I viewed it in chrome/safari, I noticed that the window was not resizing to the content.

    -- Steps to reproduce --
    1. Go to http://extjs.com/deploy/dev/docs/ using chrome
    2. Open the js console (ctrl+shift+j)
    3. Run the following line:

      PHP Code:
      Ext.Msg.show({msg:'<ul><li>My first list long item goes here</li><li>My second long  list item goes here</li></ul>'}) 

    Expected Result: The lines should not wrap (unless they exceed the maxWidth)

    Actual result: The window can't measure the width of the message and ends up using its minWidth


    Why?

    This is happening because a span is used to house the message. Webkit returns 0 for the offsetWidth of an inline element containing a block level element

    Workaround/Solutions

    Use css to make your block level element be inline-block

    Patch Ext.MessageBox so that it creates a div that floats. That way it still shrink wraps and webkit will be able to get its offsetWidth

    Is this really a bug?

    The current documentation does not say that html is not supported so I do think it's a bug. I think it would be pretty common to gather all error messages and display them as a list in the MsgBox.

    I can think one of two things should be done: document it as not supporting html, or change the span to a floating div
    Last edited by Juanito; 28 Apr 2009 at 5:17 AM. Reason: typo

  2. #2
    Sencha User
    Join Date
    May 2009
    Posts
    19
    Vote Rating
    0
    anupkshah is on a distinguished road

      0  

    Default Same in Ext JS 3.3

    Same in Ext JS 3.3


    Quote Originally Posted by Juanito View Post

    [...snip!...]

    Workaround/Solutions


    Use css to make your block level element be inline-block

    [...snip!...]
    Just to add that I'm finding the same problem in Ext JS 3.3, and applying the above CSS works in my scenario, too.

    For the moment, I have done this:
    Code:
    .ext-webkit .x-window-dlg .ext-mb-text {
        display:inline-block;
    }

Thread Participants: 1