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:
