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


    Default [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


    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


    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
    Vote Rating
    anupkshah is on a distinguished road


    Default Same in Ext JS 3.3

    Quote Originally Posted by Juanito View Post



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

    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:
    .ext-webkit .x-window-dlg .ext-mb-text {

Thread Participants: 1