Sencha Touch and iOS 7 layout issues

[beckhamrryyaann]

After upgrading to iOS 7 on my iPad I am now having layout issues. My viewport will not fill the entire screen as it did prior to the update. IMG_0338.jpg

Below is my code

var view = Ext.Viewport.add({
     layout: {
          type: 'fit'
     },

     fullscreen: true,
     items: [{
         xtype: 'grouplistmin'
     }]          
});

This is ran in the launch event of the app.js . This used to fill screen now see my attached photo to see what it does.
Any ideas.

[Johnny Major]

Can you remove the layout and add the fullscreen config to your grouplistmin widget.. Then just add your widget to the viewport like below.

var view = Ext.Viewport.add(Ext.widget('grouplistmin'));

[beckhamrryyaann]

Still no luck....below is the code of my two files....

group list min code...

Ext.define('ShowroomWalkthrough.view.GroupListMin', {
    extend: 'Ext.dataview.List',
    xtype: 'grouplistmin',
    requires: ['ShowroomWalkthrough.store.GroupsMin'],
    config: {
        layout: 'fit',
        fullscreen: true,
        items: [{
            xtype: 'list',
            itemId: 'groupslistminlist',
            store: 'GroupsMin',
    	    ui: 'round',
		    singleSelect: true,
		    itemTpl: [
            '<div>',
                '<div style="float: left;"><img height="60" width="40" src="/mccrearyimgs/{PICJPGPATH}"/></div>',
                '<div style="font-size: 13pt;" style="margin: 5px;"><font size="2">Loc: {SRPLACENO} </font><br> {SRSTYLE}</div>',
                '<div style="clear:both;"></div>',
            '</div>'
            ]
        }]	
	}
});

app.js launch funtion

launch : function() {
        //add the main navigation view to the viewport
        var view = Ext.Viewport.add(Ext.widget('grouplistmin'));
}

[beckhamrryyaann]

It does it also in Chrome on the desktop....if you specify in the url display=touch then it also does it in Chrome. It seems no matter how I do it it will not fit entire screen.

[beckhamrryyaann]

I think it has something to do with the new app management for the touch interface with the little block in the lower right hand corner. If I go straight to the index.html without going through the valence framework then it shows correctly. ( by passing the login and it shows correct.??

[JosephHarriman]

Was this ever resolved? I picked up my iPad and updated to iOS 7 and the same thing is happening to me. All the Valence examples are affected as well.

[Johnny Major]

Joseph,

To fix the issue with iOS 7 please update the mobile portals hook.js in method settingsapplied to apply the runTouchAppsInLine to false.

This will launch applications into a new browser tab instead of inside the portal.

        Ext.apply(Portal.utils.Settings,{
            maxOpenApps : null,
            listenForShake : true,
            runTouchAppsInLine : false
        });

hook.js file resides at
/html/portal/mobile/hook.js

Thanks

[JosephHarriman]

Thanks for that. I can see everything in a separate tab now, but the original header bar is cut in half and it doesn't make for a nice presentation. Plus we lose that really cool Valence app menu at the lower right of screen.

[Johnny Major]

Joseph,

What do you mean by original header bar cut in half? Could you upload a pic of what your seeing?

Thanks

[JosephHarriman]

Johnny open the jpg posted with the original entry in this thread and zoom in you can see the top header bar is overlaid. Basically cut in half.

[Johnny Major]

Joseph,

Was able to replicate this and seems to be an issue when the iPad devices orientation is landscape.

This is is probably something fixed in the latest Sencha Touch version (not for sure until able to test). We will be using the latest version of Touch in our next release of Valence however cant place the latest in Valence 3.2. I will do a bit a little bit of research and see if any patch could be place on Valence 3.2 Touch version to fix this.

[beckhamrryyaann]

Thanks Johnny.
I would use this fix also. Right now we are just dealing with it.

[lefedad]

I'm having the same issue with Chrome on a Samsung Galaxy Note 3 (Android OS), issue is not exclusive to iOS 7. The change to portalhook.js corrected the issue but now on the iPhone I can't make the app a stand alone on the home screen.