Results 1 to 5 of 5

Thread: [MODERN] iOS - problems with positioning and toolbars

  1. #1

    Default [MODERN] iOS - problems with positioning and toolbars

    Hi,

    I have some issues with positioning and toolbars on iOS build. I was wondering if anyone had similar problems and is there any proven set of settings and tweaks that make that work?

    1) on iOS device (other than iPhone X) a white gap is added on top, to accommodate for a built in toolbar. That is almost fine, but... this does not work when for example a form is being edited, and the view is moved up.
    The content will cover the built in toolbar, and that should not happen.
    iphone8.pngiphone8_2.png
    What is even worse, the main viewport does not respect this offset, and as a result a bottom part is cut off. (Its like the height is adjusted without taking into account the gap for toolbar)
    Is this something that should be addressed on Cordova or ExtJS level?




    2) iPhone X (and other models with notch) - the white gap is added and it does not play well with iPhone X, as it has its own offset?
    The gap is not needed and it creates the same main viewport "cut off" issue as above.
    iphonex.jpg


    These problems render the apps totally useless.


    I have used the following settings so far:


    For index.html
    Code:
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">


    For cordova config.xml
    Code:
    <preference name="DisallowOverscroll" value="true" />
    <preference name="EnableViewportScale" value="false" />
    There is also a pretty good post about these type of issues here:
    https://stackoverflow.com/questions/...ne-x-simulator

    Thanks for any tips
    Maciej

  2. #2
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    157
    Answers
    1

    Default

    me too, same error
    Any fix?

  3. #3

    Default

    First of all, use the settings I have described in the initial post.

    Second, you might wan to add extra margins in some way to Body on index.html
    Use Safari web inspector to check what elements are affected.
    None of them work perfect for me, but I didn't have time to investigate this further:
    Code:
    .x-ios-native:not(.x-phone.x-landscape){
     padding-top: 0px!important;
    }
    
    body{
      background: var(--alt-background-color);
    }
    
    .x-viewport:not(.x-phone.x-landscape){
      padding-bottom: env(safe-area-inset-bottom);
      padding-top: env(safe-area-inset-top);
    }
    I have added support ticket and there is an issue registered for that to fix "native" support on iOS with notch.

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    19

    Default

    Sencha, any update on this??? I'm on version 6.7 and handling of the iPhone X* screen format is very lacking.

    (Maciej, good tips by the way)

  5. #5
    Sencha Premium User
    Join Date
    Oct 2016
    Posts
    24
    Answers
    1

    Default

    Quote Originally Posted by maciej.zabielski View Post
    First of all, use the settings I have described in the initial post.

    Second, you might wan to add extra margins in some way to Body on index.html
    Use Safari web inspector to check what elements are affected.
    None of them work perfect for me, but I didn't have time to investigate this further:
    Code:
    At the moment this is the only working solution.
    Any plan from Sencha to support iPhone X, Xs and XR natively ? 
    
    .x-ios-native:not(.x-phone.x-landscape){
     padding-top: 0px!important;
    }
    
    body{
      background: var(--alt-background-color);
    }
    
    .x-viewport:not(.x-phone.x-landscape){
      padding-bottom: env(safe-area-inset-bottom);
      padding-top: env(safe-area-inset-top);
    }
    I have added support ticket and there is an issue registered for that to fix "native" support on iOS with notch.
    At the moment this is the only working solution.
    Any ETA from Sencha to support iPhone X* family natively ?

Similar Threads

  1. Replies: 0
    Last Post: 20 Nov 2017, 2:04 AM
  2. [NOREPRO] TabBar positioning and Panel border CSS problems in 4.0.7
    By dbradicich in forum Ext:Bugs
    Replies: 2
    Last Post: 11 Nov 2011, 7:49 AM
  3. Replies: 1
    Last Post: 17 Sep 2009, 2:04 AM
  4. Problems Positioning Label Within gridPanel Toolbar
    By raydeen in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 24 Aug 2009, 9:25 AM

Posting Permissions

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