Any perfect solution for notch detection

Ionic Framework
1

expanding header in notch phones is big problem. Can anyone resolve this?

2

What exactly is your Problem? The Ionic Header and Toolbar should handle this automatically.

3

problem is “safe-area-inset-top”. iphoneX and upar models have notch and env(safe-area-inset-top) working fine. but what about androids?

Ionic Header and Toolbar not handling automatically btw.

1 Like
4

Which Ionic Version do you use?

5

I am using latest one ionic 5

6

Which framework? Angular, React or Vue?

7

ionic 5 with angular framework

8

It works definitely out of the box here!! Please show me some html and an image of what the result looks like

9

let me debug then i will get back

10

Screenshot 2020-11-09 at 3.10.32 PM
Screenshot 2020-11-09 at 3.10.32 PM806×220 36.2 KB

see attached screenshot

11

and the html code pls?

12 
<ion-app>
<ion-header>
</ion-header>
<ion-content>
</ion-content>
</ion-app>

nothing extra styling

13

If i should help you, please post the exact html of that header in that image…

14 
<ion-app>
  <!-- START OF ION HEADER OF USER -->
  <ion-header>
    <div>
      <div class="menu-toggle">
        <ion-icon (click)="openSideNav()" name="menu"></ion-icon>
      </div>
      <div class="logo" tabindex="-1" (click)="focused = false">
        <img src="assets/images/patientMD-logo.png" alt="PatientMD Logo">
      </div>
      <div class="search-g" *ngIf="docApp || patApp || bizApp">
        <ion-icon src="assets/images/_ionicons_svg_ios-search.svg" class="webui-search-icon"></ion-icon>
        <input type="text" placeholder="Search Speciality, Doctor, Deal, Video etc.." [value]="searchQuery" #q (keyup.enter)="gotoSearch(q.value)" (focus)="focused = true" (keyup)="search($event)" id="gsearchBox">
        <span class="clear-search" *ngIf="q.value.length > 0" (click)="q.value = '';focused = false">&times;</span>
      </div>
      <div class="user-menu noDemo">
        <div *ngIf="docApp" [class.web-comp]="docApp">
          <div class="liveDivs" (click)="openNotifDetails()">
            <div class="d1">{{totalAppts}}</div>
            <div class="d2">Your Today's {{totalAppts < 2 ? 'Appointment' : 'Appointments'}}<br><span>
                <ion-icon name="caret-down-sharp"></ion-icon>
              </span></div>
          </div>
          <div class="statusGrid">
            <div class="d1">
              <ion-icon class="icon1" name="toggle"></ion-icon>
              <ion-icon class="icon2" name="toggle"></ion-icon>
            </div>
            <div class="d2" (click)="changeStatus()">
              Control Bookings
            </div>
          </div>
          <div class="scan">
            <div class="first">
              <div class="timelinebtn qr" (click)="gotoscan()">
                <ion-icon name="scan-outline"></ion-icon>
                <span class="fb">Scan for Appointments</span>
              </div>
            </div>
          </div>
        </div>
        <div *ngIf="!docApp">
          <div class="avatar">
            <img [src]="imageSource" alt="image" *ngIf="imageSource === 'assets/images/Spinner-1s-200px.gif'">
            <img [src]="imageSource" alt="image" *ngIf="imageSource !== 'assets/images/Spinner-1s-200px.gif'">
          </div>
          <div class="info">
            <p *ngIf="csApp">{{userFName}} {{userMName}} {{userLName}}</p>
            <p *ngIf="userFName && userLName && !csApp; else userHandleName">{{userFName}} {{userMName}} {{userLName}}</p>
            <ng-template #userHandleName>
              <p>{{mhandle}}</p>
            </ng-template>
            <span class="star-indicator">
              <ion-icon name="star"></ion-icon> {{docRating}}
            </span>
          </div>
          <div class="prof-stats">
            <span>
              <strong>{{patCount}}</strong> Patients
            </span>
            <span class="active">
              <strong>{{docVisitCount}}</strong> Visits
            </span>
          </div>
        </div>
        <div>
          <ion-icon name="notifications-circle-outline" (click)="showNotif()"></ion-icon>
          <ion-icon name="help-circle-outline" (click)="invoke3dots()"></ion-icon>
        </div>
      </div>
    </div>
  </ion-header>
  <!-- END OF ION HEADER OF USER -->

  <!-- START OF MAIN CONTENT -->
  <ion-content class="ion-content bg-color">

    <!-- PAGE CONTENT -->
    <div>
      <ion-router-outlet id="main" animated="false"></ion-router-outlet>
    </div>

  </ion-content>
  <!-- END OF MAIN CONTENT -->

</ion-app>
15

Why do you reinvent the wheel?

Inside of the <ion-header> you should use a <ion-toolbar>. Button Placements are described here, so just do something like:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    ... (logo and stuff)
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon icon="..."></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
16

let me try and debug

17

perfect! its working. thanks!