Hello,
I have a quick question, do you know how to remove this white bar at the bottom of my application ?
Hello,
I have a quick question, do you know how to remove this white bar at the bottom of my application ?
Can you share your code ?
Of app.component.html ?
please share of this page html code
the page that gives you the screenshot you shared
<ion-content>
<div id="container">
<ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-card class="cardWelcome">
<ion-card-header>
<ion-card-title>{{ homeMessage.firstMessage }} 👋🏼 </ion-card-title>
</ion-card-header>
<ion-card-content>
{{ homeMessage.textMessage}}
<br /><br />
<div class="nextSorties">Prochaines sorties</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-slides [options]="slideOpts" class="cardProjet" style="text-align: left;">
<ion-slide *ngFor="let rassosMessageBoucle of listlocal let i=index">
<a routerLink="/affiche/{{rassosMessageBoucle.id}}" *ngIf="i<5">
<ion-card class="cardSize" *ngIf="rassosMessageBoucle.isok == '1'">
<img [src]="rassosMessageBoucle.imgRassos">
<ion-card-header>
<ion-card-title style="text-align: center;">{{ rassosMessageBoucle.nameRassos }}</ion-card-title>
<ion-col *ngIf="rassosMessageBoucle.validteam == '1'">
<ion-badge color="warning" style="font-size: 7px; margin-right: 2px; margin-top: 4vw;"><ion-icon name="lock-closed-outline"></ion-icon> Validé</ion-badge>
<ion-badge color="success" style="font-size: 7px; margin-top: 4vw;"><ion-icon name="location"></ion-icon> {{ rassosMessageBoucle.villePrincipale }}</ion-badge>
</ion-col>
<ion-col *ngIf="rassosMessageBoucle.validteam == '0'">
<ion-badge color="medium" style="font-size: 7px; margin-right: 2px;"><ion-icon name="lock-open-outline"></ion-icon> Aucune validation</ion-badge>
<ion-badge color="success" style="font-size: 7px;"><ion-icon name="location"></ion-icon> {{ rassosMessageBoucle.villePrincipale }}</ion-badge>
</ion-col>
</ion-card-header>
</ion-card>
</a>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-card>
<img [src]="cityMessage.imgCity" />
<ion-card-header>
<ion-card-subtitle>à trottinette</ion-card-subtitle>
<ion-card-title style="text-transform: uppercase;">Visitez {{ cityMessage.nameCity }}</ion-card-title>
</ion-card-header>
<ion-card-content>
{{ cityMessage.descriptionCity }}
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
Your code is perfect. try to run your application in the browser and find unnecessary white space using inspect element tool
I use vscode and i install prettier, is format code and remove blank space