MessageBox doesn't resize every time based on message content

[chandramuralis]

Sencha Touch version tested:

• 1.1.0

• only default ext-all.css
• custom css (include details)

Platform tested against:

• iOS 3.x
• iOS 4
• Android 2.1
• Android 2.2
• Windows Desktop Chrome
• Windows Desktop Safari

Description:

• MessageBox size is not getting resized every time we pass message content with different length.

Test Case:

    Ext.Msg.alert('Hi', "First Message");
    //do something
    Ext.Msg.alert('Hi', "Second Message is more lengthier than the first one. This message will not be displayed properly");

Steps to reproduce the problem:

• Create a message box with short message and show it. This message box will display properly
• Show another message box with lengthy message.

The result that was expected:

• Second message box and all the following message box should resize based on the new content.

The result that occurs instead:

• Second message box is not resized for the new lengthy message content and you won't be able to see all the words clearly.

Screenshot or Video:

• attached

Debugging already done:

• None

Possible fix:

• Right now I'm handling by destroying the message box instance every time I finish showing up the content.

[mpacific]

I've worked around this by doing doComponentLayout() on Message Boxes

[fx-mike]

Ext.Msg.on('show', function () {
    Ext.Msg.doComponentLayout();
});

is how I handle this issue for now

[mike.estes]

Thanks for the report, filed as TOUCH-427. Listening for the show event and calling doComponentLayout is indeed the best workaround for now.

[eva-lotta]

You can also overwrite the show method of Ext.Msg and just add a this.doComponentLayout() at the bottom. So like:

    Ext.override(Ext.MessageBox, {
        show : function(config) {
            var attrib,
...
            if (config.input) {
                config.input.dom.value = config.value || '';
                // For browsers without 'autofocus' attribute support
                if (assert.test(attribs.autofocus+'') && !('autofocus' in config.input.dom)) {
                    config.input.dom.focus();
                }
            }
            
            this.doComponentLayout();


            return this;
        }