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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With