Skip to content

ios page.showModal platform inconsistancies & bugs #781

Closed

Description

@NathanaelA
  1. By default on Android it will show a title bar; by default on iOS their is no title bar.
  2. On Android you can can change the title bar by declaring an ActionBar and settings it title. This does not work on iOS, still no title bar present.
  3. On iOS the only way to get a title is to create a small layout variation to have a
    wrapped in a or (so you have to add two or more additional elements to the layout to have a title on iOS).
  4. By default on both iOS and Android fullScreen parameter is not working (well it is consistently broken to act like it is true on both platforms). I did put a bug report in ShowModal in v1.3 #748 which I have figured out how to fix Android; but I have not bothered to dig into iOS (and probably won't). -- Patch This fixes the issue with the android Dialogs  #726 has a fix for this.

5. When you pull up the keyboard on ios it covers most of a dialog; I do believe the proper behavior is for the screen to scroll up so the fields are in focus and visible. At least it behaves properly on Android. #782

Activity

  1. hamorphis commented on Sep 23, 2015

    @hamorphis
    Contributor

    On iOS, the fullScreen=false mode is available only on iPads. iPhones ignore fullScreen=false and show the dialog on the entire screen since their displays are small and there is nothing we can do to force Apple change this.

  2. NathanaelA commented on Sep 23, 2015

    @NathanaelA
    Author
  3. hamorphis commented on Sep 23, 2015

    @hamorphis
    Contributor

    That is normal. When you set the height of the Layout, it becomes as high as you want. Its parent, which you don't see takes up the whole screen.

  4. vchimev commented on Sep 23, 2015

    @vchimev
    Contributor

    I confirm issue 1. that in v.1.3.0 page.showModal shows a title bar on Android, but it should not. Also I confirm with reference to issue 4. that in v.1.3.0 fullScreen=false: does not work properly on Android, works as expected on iPads and is not expected to work on iPhones as @hamorphis explained.

  5. NathanaelA commented on Sep 23, 2015

    @NathanaelA
    Author
  6. added this to the milestone on Oct 12, 2015
  7. self-assigned this
    on Oct 19, 2015
  8. removed their assignment
    on Oct 19, 2015
  9. self-assigned this
    on Oct 20, 2015
  10. hshristov commented on Oct 20, 2015

    @hshristov
    Contributor

    @NathanaelA I've fixed all issues so now it should be consistent.

    1. No matter what you set as actionBarHidden it always stays hidden.
    2. As of 1.4 we are using NavigationBar for iOS so it is not possible (at least not without a lot of changes) to show it in modal page that is why we always hide it in android (in android we are using Toolbar)
    3. For the moment this is the recommended and cross platform way - to create a layout and place a label in it. If you think showing full blown ActionBar is needed please log a different issue.
    4. fullScreen is now working as expected in android. On iOS - we sets the correct native parameter but iPhone doesn't respect it and always show the page in full screen. Only iPad do. I think this is some UX decision that could change in later iOS version.
    5. There is a nice plugin - https://github.com/tjvantoll/nativescript-IQKeyboardManager

    Closing this issue for now. Open it if there is something I have missed.

  11. rajivnarayana commented on Feb 9, 2016

    @rajivnarayana

    Workaround for 1.

    I created a toolbar plugin for other things but I was able to extend it to mimic a navigation bar on iOS https://github.com/rajivnarayana/nativescript-toolbar#modal-screens. Has xml just like an action bar with support for tap events on items as well.

    <Page xmlns="http://schemas.nativescript.org/tns.xsd" 
        xmlns:tools="nativescript-toolbar">
      <DockLayout stretchLastChild="false">
        <tools:ToolBar dock="top" barPosition="3">
            <tools.ToolBar.barItems>
                <tools:ToolBarItem text="Done" tap="onDoneButtonTapped" />
            </tools.ToolBar.barItems>
        </tools:ToolBar>
      </DockLayout>
    </Page>

    Add style="margin-bottom:0.5" attribute to allow the line below the toolbar to be not cut off when you have other elements like list-view below it.

  12. yss14 commented on Oct 11, 2016

    @yss14

    Is there a possibility to show the ActionBar on a modal view?
    @rajivnarayana linked a nice workaround for ios but I need the ActionBar or NavigationBaron both platforms...

  13. lock commented on Aug 29, 2019

    @lock

    This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

  14. locked and limited conversation to collaborators on Aug 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions