Page-router-outlet always taking up 100% height on iOS inside RadSideDrawer

kmmccafferty96 commented 4 years ago

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

When using the RadSideDrawer with a page-router-outlet in the tkMainContent, it seems that the page-router-outlet will always fill 100% of the height on iOS, even when other elements are underneath . On Android, it works fine. The reason I'm running into this issue is because I'm trying to add a BottomNavigationBar (nativescript-material-bottomnavigationbar) below my router outlet. If I remove the page-router-outlet and put anything in it's place, it will then function correctly on iOS. Also, if I leave the page-router-outlet and remove the RadSideDrawer, it also functions correctly.

It seems as if this issue is somewhat similar to an old issue that was marked as closed and fixed (https://github.com/NativeScript/nativescript-ui-feedback/issues/852a), but it's still not working.

EDIT: It seems as if this issue only occurs when there are two page-router-outlets nested as in this sample playground: https://play.nativescript.org/?template=play-ng&id=Z2a5Z7

Maybe page-router-outlets aren't supposed to be nested then? Right now I have a page-router-outlet in my app.component that lazy loads and switches between a login.component and my main app pages.component. pages.component contains the RadSideDrawer and the other page-router-outlet. I did this so I can lazy load my authorization pages and regular app content pages. Is this wrong?

Tell us about the problem

Page-router-outlet always taking up 100% height on iOS with RadSideDrawer

Which platform(s) does your issue occur on?

iPhone 11 running iOS 13.3

Please provide the following version numbers that your issue occurs with:

Progress NativeScript UI plugin version: nativescript-ui-sidedrawer version 8.0.0, nativescript-material-bottomnavigationbar version 3.1.8
CLI: 6.4.0
Cross-platform modules: 6.4.1
Runtime(s): tns-ios version 6.4.2. Everything works fine on tns-android 6.4.1.

Please tell us how to recreate the issue in as much detail as possible.

Add a grid with two rows in the main content of a RadSideDrawer
Add a page-router-outlet in the first row and anything in the second row
Notice that the content of the page-router-outlet fills 100% of the view and the second row is not visible on iOS. Also notice that on Android, the content of page-router-outlet does not fill 100% of the view and the second row is visible.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Here is my template:

<RadSideDrawer>
    <FlexboxLayout tkDrawerContent>
        <Button text="Test"></Button>
    </FlexboxLayout>
    <GridLayout class="main-grid" tkMainContent rows="*, auto">
        <StackLayout row="0">
            <page-router-outlet></page-router-outlet>
        </StackLayout>
        <BottomNavigationBar activeColor="white" inactiveColor="gray" backgroundColor="black" row="1">
            <BottomNavigationTab title="First"></BottomNavigationTab>
            <BottomNavigationTab title="Second"></BottomNavigationTab>
            <BottomNavigationTab title="Third"></BottomNavigationTab>
        </BottomNavigationBar>
    </GridLayout>
</RadSideDrawer>