iPad (iOS) hbox layout issue

[milestonebass]

I have a simple hbox layout containing buttons for a media player.

{
                xtype: 'container',
                layout: 'hbox',
                ref: 'buttonsSet',
                items: [  
                {
                    xtype: 'button',
                    text: '|<<',
                    width: 24,
                    ref: 'prevButton'
                },
                {
                    //spacer
                    width: 2
                },
                {
                    xtype:'button',
                    text: '|>',
                    width: 24,
                    ref: 'playButton'
                },
                {
                    xtype:'button',
                    text: '||',
                    width: 24,
                    ref: 'pauseButton',
                    hidden: true
                },
                {
                    //spacer
                    width: 2
                },
                {
                    xtype:'button',
                    text: '>>|',
                    width: 24,
                    ref: 'nextButton',
                    disabled: true
                }]
}

Initially the pause button is hidden and then 'switched' with the play button once a track begins playing:

this.buttonsSet.playButton.hide();
this.buttonsSet.pauseButton.show();

The pause button appears behind the first button in the hbox. When the user scrolls or resizes on the iPad it then snaps into its intended position. I have tried all combinations and places for doLayout() with no success.

This is an iPad issue (works fine everywhere else), but, is there anything I can do on the EXTJS side to force the iPad to re-evaluate the layout without user interaction? Open to any suggestions.

[iPad1/Safari/iOS]

[milestonebass]

I resolved this issue on iOS by setting the element width after the hide/show.

this.buttonsSet.pauseButton.setWidth(25);

Notice here that the width is 25 pixels (1 pixel more than the 24 pixels it was defined as). I found it would only re-evaulate the layout if the element width was set larger to than what it was previously.

Setting the width on the element has no effect on the layout itself (except making it compliant)

Please leave a reply if you faced the same issue and if this 'hack' worked for your scenario.