PDA

View Full Version : [FIXED] MessageBox doesn't resize every time based on message content



chandramuralis
19 Aug 2011, 5:35 AM
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
21 Aug 2011, 7:54 PM
I've worked around this by doing doComponentLayout() on Message Boxes

fx-mike
22 Aug 2011, 2:13 AM
Ext.Msg.on('show', function () {
Ext.Msg.doComponentLayout();
});


is how I handle this issue for now

mike.estes
22 Aug 2011, 9:05 AM
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
1 Sep 2011, 2:55 AM
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;
}