Results 1 to 7 of 7

Thread: Architect 3: App not fullscreen in iOS7/iPhone 5

  1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    27

    Default Architect 3: App not fullscreen in iOS7/iPhone 5

    I'm running Sencha Architect: <br>

    version: 3.0.1.1343
    channel: 3.0.1-stable
    platform: 1.3.0.788
    cmd: 4.0.1.45
    framework: Sencha Touch 2.3.x



    The issue is that on when I simulate using the iOS simulator for iPhone 5 or deploy the app to my iPhone 5C phone directly there is a black bar on the bottom of the screen when the app is launching (it's displaying the default app loading graphic in the screenshot below) and when the app's initial screen (a panel) shows. It covers the bottom portion of the application viewport. I've set the initial screen to fullscreen = 'True' and height = '100%'. Still I get the bar or cut off on the bottom.

    See the screen shots.

    Any ideas?
    Attached Images Attached Images
    Last edited by jonweiss; 9 Jan 2014 at 5:53 AM. Reason: to correct weird html formatting of the original post

  2. #2
    Sencha User
    Join Date
    Mar 2013
    Posts
    27

    Default

    Here's the screenshots. Not sure why they did not show up.
    photo 1.jpg

    photo 3.jpg

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    27

    Default

    It looks like the issue is with the iPhone 4-inch device hardware for iPhone 5c/iPhone 5s. It seems to work fine on the Simulator for iPhone 3.5 inch because when I switch the device hardware in the simulator to iPhone 3.5 the black bars go away and the app takes the full window. When I switch it back the app does not take the full window, as the bars on the bottom show up again. The iPhone 3.5 inch is basically the same as the iPhone 4S.

    Why would that be? This looks like a bug in Architect.

    Do I need to manually pad down the app viewport margin or something like that?

  4. #4
    Sencha User
    Join Date
    Mar 2013
    Posts
    27

    Default

    Found this: http://www.sencha.com/forum/showthre...een-on-iPhone5

    Will let you guys know after I update my loading/startup image sizes.

  5. #5

  6. #6

    Default

    I have exacly the same problem as you. But adding [email protected] tp resources/loading didn't help.

  7. #7
    Sencha Premium Member
    Join Date
    Sep 2015
    Location
    UK
    Posts
    22

    Default Gap top and bottom of app on iOS devices - Ext JS 6

    Having created and built an Ext JS 6 Universal app the viewport will not populate the entire screen in an iOS device. As per suggestions in this post I added the necessary sized default splash screens in a res/splash/ios folder during the Cordova wrap process and set the AutoHide Splash screen setting to false. This resolved the issue for me.

    In addition I also adjusted the status bar to appear outside of the bounds of the app's viewport by adding the following function in the Application.js launch function as follows:
    Code:
    launch: function () {
    
    
         document.addEventListener('deviceready', function() {
                if (Ext.os.is.iOS && Ext.os.version.major >= 7) {
                    document.body.style.marginTop = "20px";
                    Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
                }
            });
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •