Hi @erjdriver,
Try setting up the RadSideDrawer component as a root component and check if the issue will be still reproducible. For further help, you can review our drawer-navigation template.

You're saying no Page element??

Then where would I put the ActionBar?

My actual page is not the root/starting page of the page, it's just another page the user can navigate to - so there's a limit to how much I can change. I'd prefer to get this working as is considering...this same code works on Android and did on ios until about 2-3 months ago - so it's a bug in NS.

But I'd be happy to change things as long as I can have the ActionBar and also be able to navigate to this page (i.e. not a root page).

If I remove the ActionBar - the offset is less.

This problem can be easily replicated by creating a sample tsc project and replace the main-page.xml with my code above.

Hi @erjdriver,
I tested the provided XML in a local project. However, I was unable to recreate the issue on my side. I will check again in the lower iOS versions.
Meanwhile, my suggestion was to set the RadSideDrawer in the app-root.xml and then set the Frame as mainContent. In this scenario, the ActionBar should be still defined in each page individually as it is done in the template, that I have mentioned in my previous comment. The idea of this check is to verify if layouting will be fixed. Also, keep in mind that RadSideDrawer will not be stretched while using it inside the pages on iPhone X and above. Check out this feature request.

It will also help if you can send a project, which can be used for debugging.

Here's the project with the problem.

I just did tns create layout-problem --template tsc

Then added nativescript-ui-sidedrawer plugin.

The latest NS versions are installed - 5.3.x

The simulator is running iPhone 6 running ios 12.2.

layout-problem.zip

I followed your suggestion - and attached is the app with RadSideDrawer in app-root.xml file.

In main-page.xml file, if I enable the ActionBar code - it works as expected.

But if the ActionBar is commented out, then there's a layout issue.

Please see attached screenshot. The layout goes all the way to the top of the device screen (shown in blue. Looks like the parent GridLayout starts at y-offset 0 and again there's an offset before the child ScrollView is rendered (area shown in blue).

Works fine on Android (top screenshot).

layout-problem.zip

Again, there seems to be a layout bug in the ios version - proven by both this and the earlier submitted versions.

I would like the earlier project to work as is - as the second one would require quite a bit of changes in my code - and also I've got some pages without ActionBar - so the above problem would appear.

Thank you.

I do have the same issue especially when I use RadListView or RadDataForm.
I am using RadSideDrawer for the whole app with Vue template and slot.
I will provide more codes when I will get my Mac.

@tsonevn - as requested I submitted a project with the issue - above with the attached layout-problem.zip file.

Did you get a chance to replicate it?

The last attached zip file above - the problem occurs if the ActionBar is commented out - there's a problem.

In the the second to last attached zip file - is the original code that I'd like to get working (w/o moving the sidedrawer to the root). That problem occurs everytime and should be easy to replicate.

layout-problem.zip

Thanks.

Hi @erjdriver,
I was able to recreate your case on my side. I also find this feature request for allowing RadSideDrawer stretch while using it inside the Page component. I would suggest keeping track of it. You can also comment it if you want to add some additional info.
Meanwhile, you can set the SideDrawer component as root and for those Pages without ActionBar to set up the StatusBar color via nativescript-statusbar plugin.

I don't understand how you can close this issue - it's a bug!

Ok - you're saying for pages with ActionBar have RadSideDrawer as root. This requires me moving quite a bit of re-arrangement of logic and code - but I can do it. This used to work and still works on Android - isn't this a bug on the ios side?

You're saying for pages with OUT ActionBar - style the status bar. The problem is that the page goes to the top of the device screen. If I had a label text at the top of my page - it would be displayed over the status bar. This is a bug - not a matter of styling the status-bar.

NS guys - too many times when I report a bug - it's not fixed. Usually the solution is a workaround or suggestions of code changes on my end.

I'm working on a production software and there are limits to how much changes I can make without causing unforeseen issues.

I appreciate the tool, doesn't matter if it's free or for purchase - bottom line is that - if you guys want this to be used in production app development - it has to be stable and reliable.

Here's my code about the issue. just to precise I am not using ScrollView but I do get the same result (top space) also the issue is iOS only.
https://play.nativescript.org/?template=play-vue&id=JJxeIs

Thanks.

I've implemented my app with RadSideDrawer in the root file now. Unfortunately, the menu also appears on some pages where it shouldn't because of gestures - so I disabled gestures. Side-effect of this workaround.

Please tag this issue as a bug.

Thanks.

@erjdriver as of this moment the RadSideDrawer (adn with latest versions) is supported only as a root. Here is how to prevent the drawer from being opened.