Image Not Scaling



I have an image acting as a background image on my login screen. On the iOS and Android emulator the image scales the entire screen, but when trying it on my Galaxy S8 the image does not scale all the way to the bottom of the screen. I have attached an image that shows the background image and then a blue bar. The blue bar represents the part of the screen that is not reach by the image.

I have a GridLayout as the parent layout on the UI and take note of its class name “container”. I have attached the CSS and HTML files for specifics. When looking at the HTML you’ll notice two Image elements. The blur image is on top of the other and is meant to just give a blur effect, so don’t get confused by them. Neither of the images reach the bottom of the screen. If anyone has any insights that would be great!

<GridLayout class="container" rows="auto" cols="1">
    <Image src="res://splash" id="splash" stretch="aspectFill" colSpan="1" row="0"></Image>
    <Image src="res://splash_blur" id="splashBlur" stretch="aspectFill" colSpan="1" row="0"></Image>
    <GridLayout rows="15*,30*,*"  columns="*" #grid>
        <Image class="logo" row="0" col="0" src="res://logo" stretch="none" horizontalAlignment="center"></Image>
        <ActivityIndicator id="loading-indicator" row="1" row="1" col="0" busy="true" width="100" height="100" class="activity-indicator"></ActivityIndicator>
        <StackLayout id="login-container" row="1" col="0" colSpan="1" #container>
            <TextField #email hint="Email Address" keyboardType="email" [(ngModel)]=""
                       autocorrect="false" autocapitalizationType="none"></TextField>
            <TextField #password hint="Password" secure="true" [(ngModel)]="user.password"></TextField>

            <Button text="Sign In" class="submit-button color-primary" (tap)="submit()"></Button>
            <Button text="Sign Up" class="color-secondary" (tap)="register()"></Button>
StackLayout {
    margin-left: 30;
    margin-right: 30;
    padding-bottom: 15;

#splashBlur, #login-container {
    opacity: 0;

GridLayout {
    margin: 0;
    padding: 0;

.logo {
    margin-top: 20;
    margin-bottom: 15;

.container {
    margin: 0;
    padding: 0;
    background-color: #3d5afe;

Button {
    height: 40;

TextField {
    background-color: white;
    padding: 10;
    border-radius: 5;

Button, TextField {
    margin-left: 8;
    margin-right: 8;
    margin-bottom: 10;

.submit-button {
    color: white;
    margin-top: 20;


Sorry to waste your time looking at this, but after reviewing my post I noticed in the top GridLayout I had the rows set to “auto”. I changed to “*” and it fixed the issue.


I like the way the app looks, fwiw!