Hybrid View

  1. #1
    Sencha Premium Member milestonebass's Avatar
    Join Date
    Dec 2009
    Posts
    21
    Vote Rating
    0
    milestonebass is on a distinguished road

      0  

    Default iPad (iOS) hbox layout issue

    iPad (iOS) hbox layout issue


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

    Code:
    {
                    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:

    Code:
    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]

  2. #2
    Sencha Premium Member milestonebass's Avatar
    Join Date
    Dec 2009
    Posts
    21
    Vote Rating
    0
    milestonebass is on a distinguished road

      0  

    Default Rendering properly under iOS

    Rendering properly under iOS


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

    Code:
    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.

Tags for this Thread