[Solved] Strange Behavior when apply the drawerLocation="right"

[Giorgio]

Hi, I'm looking for a solution for an app-level sideDrawer, and found this interesting demo on github https://github.com/DrMabuse23/nativescript-nested-navigationtests

It run for iOS as is, but on my app I would like to have a sideDrawer on the right, so I update the demo and

if I add the

drawerLocation="Right"

on app-components/home/home.component.html file,

the sideDrawer show a strange empty bar on his area, after I choice the help link, then I reopen the sidedrawer.

I tried to see if it is a problem with css, or with a pageTransition tag that is present in the GridLayout showed below: I removed the tag, the css class but nothing adjusted the sidedrawer behavior

In Android, after some adjustments on css files, it run well also with the right location

<MainActionBar></MainActionBar>
<RadSideDrawer #drawer drawerLocation="Right"
               (drawerOpening)="onDrawerOpening()"
               (drawerOpened)="onDrawerOpened()"
               (drawerClosing)="onDrawerClosing()"
               (drawerClosed)="onDrawerClosed()"
               [transition]="sideDrawerTransition" selectionBehavior="None">

    <StackLayout tkDrawerContent class="sidedrawer-left">
        <ScrollView row="0" col="2">
            <StackLayout class="sidedrawer-content">
                 <GridLayout class="sideLightGrayLabel">
                    <Label text="ACCOUNT" class="sidedrawer-list-item-text"></Label>
                </GridLayout>
                <GridLayout columns="auto, *" rows="60" class="side-item" pageTranstion="leftSide" >
                    <Label text="" class="fa sidedrawer-list-item-icon" row="0" col="0"></Label>
                    <Label text="login" class="side-label" row="0" col="1" [nsRouterLink]="['/login']" ></Label>
                    <!-- see http://fontawesome.io/cheatsheet/ for icons -->
                </GridLayout>
                <GridLayout columns="auto, *" rows="60" class="side-item" >
                    <Label text="" class="fa sidedrawer-list-item-icon" row="0" col="0"></Label>
                    <Label text="help" class="side-label" row="0" col="1" [nsRouterLink]="['/home/help']" ></Label>
                </GridLayout>
                <GridLayout class="sideLightGrayLabel">
                    <Label text="SETTINGS" class="sidedrawer-list-item-text"></Label>
                </GridLayout>
            </StackLayout>
        </ScrollView>
    </StackLayout>

    <StackLayout tkMainContent class="bg-primary">
        <router-outlet></router-outlet>
    </StackLayout>

</RadSideDrawer>

 

[Nikolay Tsonev]

Hi Giorgio,

Thank you for the attached link to the project.
I tested on my side and indeed there was a problem in UI for NativeScript version 2.0.1 with setting the correct size for the DrawerContent child component while using Right dawerLocation.

To be able to fix this you should just to update the version of nativescript-telerik-ui to 3.0.3, tns-core-modules - 3.1.0 and nativescript-angular to 3.1.0 in the project package.json file. I am also attaching the package.json.

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.NestedProject",
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.1.0",
    "@angular/common": "~4.1.0",
    "@angular/compiler": "~4.1.0",
    "@angular/core": "~4.1.0",
    "@angular/forms": "~4.1.0",
    "@angular/http": "~4.1.0",
    "@angular/platform-browser": "~4.1.0",
    "@angular/router": "~4.1.0",
    "nativescript-angular": "~3.1.0",
    "nativescript-telerik-ui": "3.0.3",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.3.0",
    "tns-core-modules": "~3.1.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

Bear in mind that you should also remove node_modules, platforms and hooks folders before rebuilding the app.

Regards,
nikolay.tsonev
Progress Telerik

[Giorgio]

Thanks very much for the new package.json, I had not looked at the versions of the modules.

 

I take advantage of it to report an inconvenience that you have when you open the sidedrawer and then double-click the opening button: the sidedrawer remains open without content. Then If I click on the open button again, the content reappears.

Also with the new package.json with updated modules

Regards

G.

[Nikolay Tsonev]

Hi,

I reviewed the described case and unfortunately, I have to confirm that this is a real issue, which also exists in the current version of the plugin on both iOS and Android. At this time there is no workaround, which could be used.

For your convenience, we logged this problem in the nativescript-ui-feedback repository and you could keep track on the issue for further info. 

Regards,
nikolay.tsonev
Progress Telerik