Alpha Video Training
Results 1 to 13 of 13

Thread: IPhone X Resize

  1. #1
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    637

    Default IPhone X Resize

    What is the best way to resize my mobile app (UX Component) so that it fills the screen for IPhone X but stills fits earlier IPhone versions correctly? I also want it to fit correctly for Android devices.

  2. #2
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,750

    Default Re: IPhone X Resize

    There is a UX template regarding the iPhone X ... I haven't looked myself at it. Maybe the answer is in there.
    Mike Brown - Contact Me
    Programmatic Technologies, LLC
    Programmatic-Technologies.com
    Independent Developer & Consultant

  3. #3
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    637

    Default Re: IPhone X Resize

    There is a check box in the properties that allows you to turn on styling for IPhone X. However, mine resized some but doesnt fill the whole screen. My panel cards in my main UX has a white space at the top now. So it seems it doesnt resize for IPhone X perfectly.

  4. #4
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: IPhone X Resize

    Using responsive rules you should be able to run a rule based on the screen size & if iphone mobile device
    here is a link for screen selection, hope it helps
    https://www.idev101.com/code/User_Interface/sizes.html
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  5. #5
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    637

    Default Re: IPhone X Resize

    Where are the responsive rules at?

  6. #6
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: IPhone X Resize

    UX properties
    Here's an example of one of mine, it does not reference devices specifically but seems to work for me. Using something like this you can modify the properties of a panel header to offset things, or possibly a container. You'll notice the desktop comes first THEN ends with the smallest devices. I do that because the rules run in order, so if they were reversed the wrong rule would apply since a desktop device (like a tablet) is greater than 450. There are many AND (&&) options so setting up just the right rules can actually be easy. I created a thread awhile back hoping others would show their rules but nobody did. I think this might be sorely under used.

    desktop|||(screen.width >= 1000 && screen.height >= 900) && screen.orientation == 'landscape'
    Tablet-landscape|||(screen.width >= 450 && screen.height >= 450) && screen.orientation == 'landscape'
    Tablet-portrait|||(screen.width >= 450 && screen.height >= 450) && screen.orientation == 'portrait'
    Phone-landscape|||(screen.width < 450 || screen.height < 450) && screen.orientation == 'landscape'
    Phone-portrait|||(screen.width < 450 || screen.height < 450 ) && screen.orientation == 'portrait'
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  7. #7
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    637

    Default Re: IPhone X Resize

    After you put in these rules, how do you resize the actual UX component? Do you pick Panel Navigator and do some resizing?

  8. #8
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: IPhone X Resize

    in the UX client-side props in the OnOrientationChange event I put this
    {dialog.object}.runAction('resize');
    then in the javascript actions I put this for the "resize" event


    setTimeout(function() {
    var obj = {dialog.object}.getPanelObject('PANELLAYOUT_2')
    obj.resize();
    },100);


    The split second timeout seems to be perfect, I also run the action in OnRenderComplete sort of a just in case thing when the component loads. this seems to take care of any oddball painting issues with the render. Obviously, you'll want to get your own panelobject in there instead of panellayout_2
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  9. #9
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    637

    Default Re: IPhone X Resize

    So in my Login UX Component I have two panel cards and a panel navigator. I put in a panel layout so the two panel cards and panel navigator are in between the panel layout. Then I put the code {dialog.object}.runAction('resize'); into OnOrientationChange event in the client side. Then I created a javascript action and put it in text mode the code

    setTimeout(function() {
    var obj = {dialog.object}.getPanelObject('PANELLAYOUT_1')
    obj.resize();
    },100);

    in the textbox. It doesnt seem to make difference, one of my panel cards still a whitespace up top

  10. #10
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: IPhone X Resize

    I would use chromes dev tools to see what the "white space" actually is...in other words is it a margin, padding, or something else...
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  11. #11
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: IPhone X Resize

    If nothing else perhaps these safe area constraints might help,
    //portrait orientation, status bar is shown
    additionalSafeAreaInsets.top = 24.0
    additionalSafeAreaInsets.bottom = 34.0

    //portrait orientation, status bar is hidden
    additionalSafeAreaInsets.top = 44.0
    additionalSafeAreaInsets.bottom = 34.0

    //landscape orientation
    additionalSafeAreaInsets.left = 44.0
    additionalSafeAreaInsets.bottom = 21.0
    additionalSafeAreaInsets.right = 44.0

    Perhaps you can design within these limitations and save your self some grief...and actually if the pixel size is different - no worries - you can at least have an idea as to how to offset things using containers if need be and resize them with responsive rules - testing will be important
    Last edited by CharlesParker; 05-29-2019 at 11:02 PM.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

  12. #12
    Member
    Real Name
    Steven
    Join Date
    Oct 2011
    Posts
    637

    Default Re: IPhone X Resize

    Where do I put that at? I tried opening it in Google Chrome and there is no spaces like in the PhoneGap build. I have attached a screenshot of what I am seeing on a IPhone X. You can see the whitespace at the top. Any ideas on how to fix this or do you think it is a bug with the IPhone X option in Alpha?

    IMG_0745.PNG

  13. #13
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,060

    Default Re: IPhone X Resize

    I do not know - did you try it without the ticked iPhone option?
    The safe are constraints were for information only...so you might have an idea on sizing a container to show or hide as per device in responsive rules.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com "I am not discouraged, because every wrong attempt discarded is another step forward."

Similar Threads

  1. Replies: 1
    Last Post: 07-22-2014, 11:20 PM
  2. List Resize Colums width and height too (iPad/iPhone)
    By JPMPA in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 03-27-2014, 10:52 AM

Bookmarks

Posting Permissions

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