Weird blank space

@JohnCressman wrote:

I have a fairly simple page. A header, some content with a list and a footer. The problem is, I have some weird white space.

My primary color is navy, so I would expect the whole content area to be navy but I have that weird white bar at the bottom of the list.

Also, is there a way to get rid of the white area under the header and shading?

Here’s the html code:

<ion-header>
    <ion-toolbar>
        <div class="container">
            <div class="row">
                <div class="col-sm-4" style="text-align: right; vertical-align: center;" >

                </div>
                <div class="col-sm-4" style="text-align: left; vertical-align: center;" >
                        <img src="./../assets/images/lehigh-logo.svg" class="topLogo"/>
                </div>
                <div class="col-sm-4" style="text-align: right; vertical-align: center;" >

                </div>
            </div>
        </div>
    </ion-toolbar>
</ion-header>

<ion-content color="primary">
    <ion-list color="primary">
        <ion-item button *ngFor="let item of (results | async)" routerDirection="forward" routerLink="/{{ item.itemPage }}" color="primary">
            <ion-icon slot="start"  name="{{ item.icon }}" color="warning"></ion-icon>
            <ion-label text-wrap color="tertiary">
                <h3>{{ item.name }}</h3>
            </ion-label>
        </ion-item>
    </ion-list>
</ion-content>

<ion-footer>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button>
                <ion-icon slot="icon-only" name="information-circle" color="primary"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons>
            <ion-button class="btnCenter">
                <ion-icon slot="icon-only" name="construct" color="primary"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-button>
                <ion-icon slot="icon-only" name="globe" color="primary"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

Here’s the image of the page:

2019-06-12_8-47-22.png322×555 13 KB

Posts: 1

Participants: 1

Read full topic