Nativescript: ActionBar gap

[bori87]

I'v set padding and margin to 0 on every possible element but that gap in ActionBar still exists.

[tsonevn]

Hi @bori87,
Could you provide some more info about your case? It would help if you could provide some sample project or at least code sample, which could be used for debugging and the reported problem could be reproduced.

[baguosiji]

Hi @tsonevn
There is a gap left，padding margin not work；
Here is my code

<ActionBar title="">
    <WrapLayout>
        <StackLayout width="20%"  class="vertical-left" (tap)="showmodule()">
            <Label text="&#xe9bd;" class="icon" color="#fff" ></Label>
        </StackLayout>
        <StackLayout width="60%" height="100%" class="vertical" >
            <Label text="我的店铺" ></Label>
        </StackLayout>
    </WrapLayout>
    <!--<ActionItem (tap)="showshow()" icon="res://showmodule"></ActionItem>-->
</ActionBar>

[tsonevn]

I investigate further your case and I it seems that those default margins to ActionBar are coming from the Android theme.
Regarding that, I would suggest setting a negative number for the left margin, which will stretch the component completely to the left. For example:

<ActionBar title="" marginLeft="-20">
    <WrapLayout>
        <StackLayout width="20%"  class="vertical-left" (tap)="showmodule()">
            <Label text="&#xe9bd;" class="icon" color="#fff" ></Label>
        </StackLayout>
        <StackLayout width="60%" height="100%" class="vertical" >
            <Label text="我的店铺" ></Label>
        </StackLayout>
    </WrapLayout>
    <!--<ActionItem (tap)="showshow()" icon="res://showmodule"></ActionItem>-->
</ActionBar>

[baguosiji]

@tsonevn
Thank you very much for your help, I'v set margin to 0, no attempt has been set to negative number .

[gabitoesmiapodo]

I had the same problem on multiple apps (always on Android).

The only workaround seems to be what @tsonevn said: using a negative left margin (around -15).

It might be that the ActionBar component should recognize the margin-left: 0 property on Android and convert it to something like margin-left: -15 automatically?

Or maybe a custom attribute for Android, something like:

<ActionBar resetPadding="true" /> to eliminate this annoyance.

[tsonevn]

Hi @gabitoesmiapodo,
As I mentioned in my previous comment this margin cames from the native android theme, where are following the material design guidelines recommended by android. More about those guidelines could be found here.
Making the changes, which will set the position for the components to start from the very beginning of the screen will be a little hacky solution, which could lead to issues in the feature.

In regard to that, the two possible solutions are to change the default Android theme or to use the solution with the negative margin.

[gabitoesmiapodo]

Great, thanks.

May be we could add it as a note in the docs to let users know why this happens and how to "fix" it? (I don't know if we should, or how to do it).

[racknoris]

The problem still exists in ns 4.1, android runtime 4.1.3,
@tsonevn solution worked perfectly

[tsonevn]

HI @racknoris,
Can you provide sample project, which can be used for debugging?

[racknoris]

@tsonevn yes, I now opened issue #6133

[ChathuraLiyanapathirana]

Use
In your .xml -->
<ActionBar class="action-bar" margin-left = "-15">
or
In .xml related .css -->

 .action-bar{
    margin-left: 20px; //this belongs to you
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.