StackLayout that I vertically assigned bottom has a gap underneath?

Question

Today I tried to rewrite Snapchat's UI as a challenge. I started with the landing page, but I reached an issue with doing the buttons at the bottom, they have a gap underneath them.

I'm quite surprised it doesn't go 100% to the bottom naturally, but is there a way I can do this? I could do margin-top on the bottom stack layout but is there a better way?

UPDATE: Putting margin-top on the bottom StackLayout just pushes the height up, it doesn't make it go down, it seems like the positioning is locked to around 96% of the screen.

Here is my playground code - https://play.nativescript.org/?template=play-tsc&id=zRSpSr

Answer 1

You can use DockLayout to solve your problem, it helps you dock child items to any side of the screen. Docking <StackLayout> containing buttons to bottom and <Image> to top will do the trick for you.

<Page navigatingTo="onNavigatingTo" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
<DockLayout>
    <StackLayout dock="bottom" horizontalAlignment="center"
        class="footer">
        <Button class="button is-red" text="LOG IN!" tap="onSigninButtonTap"></Button>
        <Button class="button is-blue" text="SIGN UP" tap="onSigninButtonTap"></Button>
    </StackLayout>
    <Image dock="top" horizontalAlignment="center" class="logo" src="http://www.stickpng.com/assets/images/584c4c0b1fc21103bb375ba9.png" />
</DockLayout>
</Page>

CSS :

DockLayout {
    background-color: #FFFC31;
}

EDIT: iOS SAFE AREA SUPPORT is probably causing the problem for you, take a look at the margins specified in NativeScript 5.0

You can read more about it, here.

Answer 2

There is no issue with your layout, the default button ripple / shadow effect takes that space. You could get rid of it by applying border to your button.

XML

<Page navigatingTo="onNavigatingTo" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
    <GridLayout>
        <StackLayout row="0" verticalAlignment="top" class="header">
            <Image horizontalAlignment="center" class="logo" src="http://www.stickpng.com/assets/images/584c4c0b1fc21103bb375ba9.png" />
        </StackLayout>
        <StackLayout row="1" verticalAlignment="bottom" horizontalAlignment="center"
            class="footer">
            <Button class="button is-red" text="LOG IN" tap="onSigninButtonTap"></Button>
            <Button class="button is-blue" text="SIGN UP" tap="onSigninButtonTap"></Button>
        </StackLayout>
    </GridLayout>
</Page>

CSS

.button {
    width: 100%;
    color: #fff;
    font-size: 22px;
    padding: 50px;
    height: 200px;
    font-weight: 600;
    border-width: 1;
}

.button.is-red {
    border-color: #F8455A;
    background-color: #F8455A ;
}

.button.is-blue {
    border-color: #00ADFC;
    background-color:   #00ADFC;
}

Updated Playground

Edit: For iPhone X or any device with notch display:

It's the issue with safe area, if you want your component to stretch beyond the safe area insets, you just have to set iosOverflowSafeArea="true" on it.

Try setting it on the sign up button, you might have to adjust the height accordingly on these devices if you do that. Use nativescript-platform-css for device specific CSS stylings.