I have this project on the screen dump were I am having issues when I focus on the input the, the header is automatically pushed and it will be hidden is there anything I can do to stop this weird behavior?
my project is based on ionic 4
Did you make your header fixed? It looks like it’s part of the content and gets pushed out of view, due to the fact, that the content is / was shrinked by the keyboard.
No… here is my code for the header
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<!-- header toolbar -->
<ion-segment [(ngModel)]="segment" (ionChange)="updatePosts()">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
<ion-buttons slot="end">
<ion-button (click)="presentFilter()">
<ion-icon slot="icon-only" name="options"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<!-- end of main header toolbar -->
</ion-header>
have some solved this pls?? I need help
Seems like this is an issue for so long. no one replied. I am also facing the same issue in iOS when keyboard launches
Here is my info:
Ionic:
Ionic CLI : 5.4.1 (…/versions/node/v10.16.3/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 13 other plugins)
Utility:
cordova-res : 0.8.1 (update available: 0.15.1)
native-run : 0.2.9 (update available: 1.0.0)
I tried: not working
.scroll-content{
padding-bottom: 0px !importan;
}
and
.ionic-content {
–offset-bottom: 0 !important;
}
anybody?
<ion-header>
<ion-toolbar color="--bory-blue">
<ion-buttons slot="start">
<ion-menu-button color="light"></ion-menu-button>
</ion-buttons>
<ion-title>
SpeechMate::{{auth.title}}
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div class="videoIn">
<div class="col-md-5">
<h3>Local stream</h3>
<video id="videoInput" autoplay
poster="{{auth.root}}assets/png/webrtc.png"></video>
</div>
</div>
<div class="row">
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-button class="start" color="white" (click)='startAfterCheckPermission()' color="primary" *ngIf="status === NO_CALL">start</ion-button>
<ion-button class="start" color="white" (click)='stop()' color="danger" *ngIf="status === POST_CALL || status === IN_CALL || status === IN_PLAY">stop</ion-button>
<ion-button class="start" color="white" (click)='play()' color="primary" *ngIf="status === NO_CALL">play</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div class="videoOut">
<h3>Remote stream</h3>
<video id="videoOutput" autoplay
poster="{{auth.root}}assets/png/webrtc.png"></video>
</div>
<div class="row">
<div class="col-md-12">
<label class="control-label" for="console">Console</label><br>
<br>
<div id="console" class="democonsole">
<ul></ul>
</div>
</div>
</div>
<div id="layer" *ngIf="show"><img src="{{auth.root}}assets/imgs/loading.gif"/></div>
</ion-content>
This is my HTML sample
I have got the issue when using v3, but I have no issue about that recently.