Strange Behavior when apply the drawerLocation="right"

4 posts, 0 answers
  1. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 19 Jul Link to this post

    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>

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 19 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 19 Jul in reply to nikolay.tsonev Link to this post

    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.

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 20 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top