Gap occurs when using sidedrawer button in actionbar


#1

hi,
in my app after using sidedrawer in the action bar get a gap on the top…not able to change it…
the screen shot is

my code is

<ActionBar title="Daily Usage chart">
  <NavigationButton text="Go Back" android.systemIcon="ic_more" android.position="right"
  (tap)="onDrawerButtonTap()"></NavigationButton>
</ActionBar>
<ScrollView>
<RadSideDrawer #drawer showOverNavigation="true" [drawerTransition]="sideDrawerTransition" class="daily">
  <StackLayout tkDrawerContent class="sidedrawer">
    <StackLayout class="sideStackLayout">
      <Button text="Daily Usage" [nsRouterLink]="['/daliy_usage/daliy_usage']" class="button"></Button>
      <Button text="Latest Usage" [nsRouterLink]="['/daliy_usage/latest_usage']" class="button"></Button>
      <Button text="Logout" [nsRouterLink]="['/logout']" class="button"></Button>
    </StackLayout>
  </StackLayout>
  <GridLayout  tkMainContent >
    <RadPieChart allowAnimation="true" >
      <PieSeries tkPieSeries legandTitle="Ac" selectionMode="DataPoint"  expandRadius="0.2" outerRadiusFactor="0.8" [items]="DailyData" valueProperty="Value" showLabels="true" >
      </PieSeries>
      <Palette tkPiePalette seriesName="AC" >
        <PaletteEntry tkPiePaletteEntry fillColor="#addd8e" strokeColor="#addd8e"></PaletteEntry>
      </Palette>
      <Palette tkPiePalette seriesName="Common_Area">
        <PaletteEntry tkPiePaletteEntry fillColor="#feb24c" strokeColor="#feb24c"></PaletteEntry>
      </Palette>
      <Palette tkPiePalette seriesName="Landscape_And_Carpark">
        <PaletteEntry tkPiePaletteEntry fillColor="#bcbddc" strokeColor="#bcbddc"></PaletteEntry>
      </Palette>
      <Palette tkPiePalette seriesName="Lift">
        <PaletteEntry tkPiePaletteEntry fillColor="#D72226" strokeColor="#D72226"></PaletteEntry>
      </Palette>
      <Palette tkPiePalette seriesName="Lighting_And_Power">
        <PaletteEntry tkPiePaletteEntry fillColor="#51B5EE" strokeColor="#51B5EE"></PaletteEntry>
      </Palette>
      <Palette tkPiePalette seriesName="Misc">
        <PaletteEntry tkPiePaletteEntry fillColor="#E2E062" strokeColor="#E2E062"></PaletteEntry>
      </Palette>  
    </RadPieChart>
  </GridLayout>
</RadSideDrawer>
</ScrollView>

so any one please help to solve this


#2

I think you shouldn’t put a RadSidedrawer inside a ScrollView.

Put the ScrollView into the GridLayout tkMainContent tag. Something like

<ActionBar title="Daily Usage chart">
  <NavigationButton text="Go Back" android.systemIcon="ic_more" android.position="right"
  (tap)="onDrawerButtonTap()"></NavigationButton>
</ActionBar>
<RadSideDrawer #drawer showOverNavigation="true" [drawerTransition]="sideDrawerTransition" class="daily">
  <StackLayout tkDrawerContent class="sidedrawer">
    <StackLayout class="sideStackLayout">
      <Button text="Daily Usage" [nsRouterLink]="['/daliy_usage/daliy_usage']" class="button"></Button>
      <Button text="Latest Usage" [nsRouterLink]="['/daliy_usage/latest_usage']" class="button"></Button>
      <Button text="Logout" [nsRouterLink]="['/logout']" class="button"></Button>
    </StackLayout>
  </StackLayout>
  <GridLayout  tkMainContent >
        <ScrollView>
            <RadPieChart allowAnimation="true"></RadPieChart>
        </ScrollView>
  </GridLayout>
</RadSideDrawer>

#3

the code still make gap there .only able to scroll now.


#4

Maybe the content is vertically aligned to the center?

Try adding verticalAlignment=“top” on the GridLayout for your contents.

Or it may be that the RadPieChart component has some top padding or margin that I don’t know of (never used it).

Anyway, it seems to me that everything is vertically centered, that might be the problem.


#5

I try all the possibilities that you prefer but not able to make any change in my code…i paste my source code in Playground

the gap arrives when make sidedrawer inside the page…and also if add a label

<ActionBar title="Daily Usage chart">
 <NavigationButton text="Go Back" android.systemIcon="ic_more" android.position="right"
 (tap)="onDrawerButtonTap()"></NavigationButton>
</ActionBar>


<Label text="test></Label>


<RadSideDrawer #drawer showOverNavigation="true" [drawerTransition]="sideDrawerTransition" class="daily">
 <StackLayout tkDrawerContent class="sidedrawer">
   <StackLayout class="sideStackLayout">
     <Button text="Daily Usage" [nsRouterLink]="['/daliy_usage/daliy_usage']" class="button"></Button>
     <Button text="Latest Usage" [nsRouterLink]="['/daliy_usage/latest_usage']" class="button"></Button>
     <Button text="Logout" [nsRouterLink]="['/logout']" class="button"></Button>
   </StackLayout>
 </StackLayout>
 <GridLayout  tkMainContent >
       <ScrollView>
           <RadPieChart allowAnimation="true"></RadPieChart>
       </ScrollView>
 </GridLayout>
</RadSideDrawer>

the gap is filled with that text…but that text can also appear in the sidedrawer also…
if not use sidedrawer inside the page…the problem is vanished…


#6

Link -> https://play.nativescript.org/?template=play-ng&id=l74rve&v=3

I removed the GridLayout that was surrounding your RadSideDrawer.
Also, there was some tag mismatch for the stack layout inside the drawer template.
Now, I’m not able to see the problem that you are describing. Please take a look at the
playground in the link above.


#7

hi

when i chek in the playground the problem is not seen…the gap is disappear…but when i paste the same code in my application…the gap occurs…why ?


#8

Can you recreate the gap using the same code from your application, in the playground?

I was not able to see that gap in the playground to begin with


#9

i just use playground to test the application its working okey…that means no gap occurs…for testing with playground i use another phone is any problem in phone changes the view ?


#10

That shouldn’t be the problem.
And if you can recreate it in playground, we can help you better.


#11

but when i use the same code with CSS in playground the page has no gap…
but run in my phone its causes gap
for testing app i use Xiaomi ,2015015 model and also native playground is not able to run in this phone

And also the page without using sidedrawer has no gap problem


#12

Did you try using tns debug android and inspecting the xml using chrome debugger?


#13

no…i am new in android and nativescript …so i dont know how to use it…
after debug i get this error ,

S: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
System.err: java.io.IOException: Broken pipe
System.err:     at android.net.LocalSocketImpl.write_native(Native Method)
System.err:     at android.net.LocalSocketImpl.access$700(LocalSocketImpl.java:33)
System.err:     at android.net.LocalSocketImpl$SocketOutputStream.write(LocalSocketImpl.java:147)
System.err:     at fi.iki.elonen.NanoWSD$WebSocketFrame.write(NanoWSD.java:700)
System.err:     at fi.iki.elonen.NanoWSD$WebSocket.sendFrame(NanoWSD.java:271)
System.err:     at fi.iki.elonen.NanoWSD$WebSocket.close(NanoWSD.java:135)
System.err:     at fi.iki.elonen.NanoWSD$WebSocket.handleCloseFrame(NanoWSD.java:184)
System.err:     at fi.iki.elonen.NanoWSD$WebSocket.handleWebsocketFrame(NanoWSD.java:218)
System.err:     at fi.iki.elonen.NanoWSD$WebSocket.readWebsocket(NanoWSD.java:246)
System.err:     at fi.iki.elonen.NanoWSD$WebSocket.access$200(NanoWSD.java:65)
System.err:     at fi.iki.elonen.NanoWSD$WebSocket$1.send(NanoWSD.java:88)
System.err:     at fi.iki.elonen.NanoHTTPD$HTTPSession.execute(NanoHTTPD.java:1011)
System.err:     at fi.iki.elonen.NanoHTTPD$LocalClientHandler.run(NanoHTTPD.java:251)
System.err:     at java.lang.Thread.run(Thread.java:818)


#14

That is a somewhat harmless error indicating that the socket connection between the device debugger and the chrome devtools frontend has been interrupted.