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

19 Aug 2011, 5:35 AM
Sencha Touch version tested:


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

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:

Debugging already done:

Possible fix:

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

21 Aug 2011, 7:54 PM
I've worked around this by doing doComponentLayout() on Message Boxes

22 Aug 2011, 2:13 AM
Ext.Msg.on('show', function () {

is how I handle this issue for now

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.

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)) {


return this;