2

As everyone can see, in the top of the image has a blank status bar(white bar)

blank space

My question:

Its possible use my cover(image) over a status bar ?

My code:

profile.ts

<ion-content *ngIf="showLogin == false" no-bounce class="bg-modal">
    <div class="header-image">
        <img src="../assets/imgs/Tkm-resources/Capa.png" onerror="this.src = '../assets/imgs/Tkm-resources/Capa.png'"/>
    </div>

    <div class="main-content" text-wrap text-center>

        <div class="circular">
            <img no-border src="{{ usuario.avatar }}"
                 onerror="this.src='../../assets/imgs/person-flat.png'" (click)="changePicture()"/>
        </div>
        <h6 no-margin padding-top>{{ usuario.nome }}</h6>
        <span color="ticket-grey">{{ usuario.email }}</span>
        <div>
            <ion-row margin-top  (click)="onClickLogout()">
                <ion-icon name="ios-exit" item-left color="primary"></ion-icon>
                <span margin-left> Deslogar</span>
            </ion-row>
        </div>
    </div>
</ion-content>
Péttrin Miranda
  • 279
  • 3
  • 13

1 Answers1

0

The preferred way to make it compatible and remove the top white space is:

Add viewport-fit=cover to the viewport meta tag in index.html as below:

<meta name="viewport" content="initial-scale=1,user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">

Please ensure all the parameters are named correctly and recheck and verify if the parameters are already added.

Also if these parameters are set correctly,check the paddings of the container views.

Refer these 1,2,3 for additional info and clarity.

Tibin Thomas
  • 1,365
  • 2
  • 16
  • 25