IOS Modal Issue

ios
nativescriptcore
uiux

#1

I Have one issue with modal in iOS that

<StackLayout>
    <GridLayout rows="*,auto" columns="*">
        <StackLayout >
            <page-router-outlet></page-router-outlet>
        </StackLayout>
        <StackLayout row="1" *ngIf="tabVisible">
            <app-tabs [moduleIndex]="0"></app-tabs>
        </StackLayout>
    </GridLayout>
</StackLayout>

here when app open it is normal as it is it shows tabs and content in frame ( <page-router-outlet></page-router-outlet>)
but when inside frame we open modal dialog that is custom dialog created and use it for some list selection or any modal then
what i get is all the style and formatting here gets changes as <page-router-outlet></page-router-outlet>

obtains full page width and height both and due to these some part in <page-router-outlet></page-router-outlet>
get hidden behind tabs yes that means row 0 in grid with height becomes (* + auto) full screen height and that cause big problem to use to shift some amount to up


#2

I’m not exactly what is the issue you are facing. But you may try removing the outer Stacklayout. If problem still persists please share a Playground example where issue can be reproduced.


#3

ok In Short time I will share play ground link


#4

#5

Here First time Scroll give perfect but after opening modal text are hidden inside tabs


#6
  1. As you could clearly read in the error log, you can’t have a ScrollView without a parent layout in iOS. You must wrap it with a GridLayout for it to work as expected (starting 4.x).
  2. ListModelComponent can’t have it’s own ActionBar when it doesn’t have an router outlet (frame) of it’s own.

#7

Not that issue sorry for code error but UI issue i have written


#8

this also happen when we open camera in webview file select.


#9

I’m not sure what is the exact issue here, could you please add a screenshot or something to explain the issue you are facing.


#10

After Opening and Closing Modal
Scroll to bottom and content not visible properly


#11

https://drive.google.com/file/d/1DIinMn-rBiwX698GfbDY6WVh-ruU5O8Y/view?usp=sharing

Above link to GIF FILE


#12

@mahavirvataliya I recall that I had a similar issue when setting a non-root view / frame as my view container for the modal page, I ended up getting the view container from parent component to resolve the issue for time being.

You may report this issue in the NativeScript Angular repo along with the GIF and the playground examples.


#13

Thank you for instant support I stuck at this issue for so many days


#14

If you have reported same issue in Github, please share the link so it might help others to follow up.


#15