Telerik UI Sidedrawer: how to remove gray bar from drawer-content

Question

How to remove this gray bar in drawer-content?

my template is:

<StackLayout horizzontalAlign="left" tkDrawerContent class="sideStackLayout" height="100%">
    <Label [text]="'Hello world'" textWrap="true" class="drawerContentText"></Label>
</StackLayout>
<ScrollView tkMainContent>
    <StackLayout #container >
        <Image src="res://logo" stretch="none" horizontalAlignment="center"></Image>
        <TextField #email  keyboardType="email" [(ngModel)]="user.login"
                   autocorrect="false" autocapitalizationType="none"></TextField>
        <TextField #password  secure="true" [(ngModel)]="user.password"></TextField>

        <Button [text]="'Sign-in'" class="submit-button" ></Button>
        <Button [text]="'Demo'" class="demo-button" ></Button>
        <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
    </StackLayout>
</ScrollView>

score 0 · Answer 1 · edited Sep 16 '17 at 16:56

That's the android status bar and for removing that I wrote the following example:

This is a statusbar that you see on top of your screen with icons of battry,clock ... .

Hide:

let frame = require("ui/frame");                
frame.topmost().android.activity.getWindow().
getDecorView().setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_FULLSCREEN);

Show:

frame.topmost().android.activity.getWindow().
getDecorView().setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_VISIBLE );

score 0 · Answer 2 · answered Nov 29 '16 at 13:42

0

Well It was not very clear but after some experiments I've found a solution - to add margin="0" to tkDrawerContent. Like this:

<StackLayout horizzontalAlign="left" tkDrawerContent class="sideStackLayout" height="100%" margin="0">

answered Nov 29 '16 at 13:42

Kopleman

45
7

score 0 · Answer 3 · answered Nov 29 '16 at 18:53

From the code snippet you have provided it looks like you have added additional contents inside the <RadSideDrawer> HTML tag.

There are two elements the StackLayout and the ScrollView (tkMainContent). The RadSideDrawer should only have two contents between its HTML tags, an element tagged with tkDrawerContent and an element tagged with tkMainContent. Simply move the first StackLayout to the either of those elements as shown here:

<RadSideDrawer>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Social" class="sideLabel"></Label>
            <Label text="Promotions" class="sideLabel"></Label>
            <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Important" class="sideLabel"></Label>
            <Label text="Starred" class="sideLabel"></Label>
            <Label text="Sent Mail" class="sideLabel"></Label>
            <Label text="Drafts" class="sideLabel"></Label>
        </StackLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
    </StackLayout>
</RadSideDrawer>

Telerik UI Sidedrawer: how to remove gray bar from drawer-content

3 Answers3