I have a simple login form and every time that I hit the input, the keyboard pushes all my components, and what I want is that the keyboard stays on top as "absolute position".
Things that I have already tried:
.css
ion-grid {
min-height: 100%;
}
.ts
keyboard.disableScroll(true);
app.module.ts
imports: [
IonicModule.forRoot(MyApp, {
scrollAssist: false,
autoFocusAssist: false)
}
]
So I don't want the keyboard to push the content, just stay on top of the screen, even that stay over the buttons.
Remove keyboard plugin and add it again
Add this to app.module.ts
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false }),
and this to app.component.ts
import { Keyboard } from '#ionic-native/keyboard';
constructor(
public platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private keyboard: Keyboard
)
initializeApp() {
this.keyboard.disableScroll(false);
}
I found the error. The problem is that I was testing the app in web view and of course, cordova component doesn't work on web view. So I generated the apk and test in a android phone. So that's it! Thanks #user9088454
Related
I am trying to implement a feature similar to whats available in Facebook i.e. if you have scrolled the news feed, pressing hardware back button takes you to the top of the list.
For this I think believe canDeactivate of Router Guards would be the proper ways.
But I am unable to find a way to check if the page has been scrolled or not.
I have tried window.pageYOffset but this always returns 0, accessing ViewChild within a Guard always returns null.
Can anyone please guide how to achieve this?
There are two approaches for this that should help you.
First, starting with Ionic 4, you can register you back button handler using the Platform features:
https://www.freakyjolly.com/ionic-4-overridden-back-press-event-and-show-exit-confirm-on-application-close/
this.platform.backButton.subscribeWithPriority(999990, () => {
//alert("back pressed");
});
Secondly, you can use more features of Ionic 4 called scrollEvents.
I have explained how to use this feature in other answers:
How to detect if ion-content has a scrollbar?
How to detect scroll reached end in ion-content component of Ionic 4?
ionic 4 - scroll to an x,y coordinate on my webView using typeScript
Hopefully that will get you moving in the right direction.
I think that last answer should solve most of your issue, so something like this:
Freaky Jolly has a tutorial explaining how to scroll to an X/Y coord.
First, you need scrollEvents on the ion-content:
<ion-header>
<ion-toolbar>
<ion-title>
Ion Content Scroll
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [scrollEvents]="true">
<!-- your content in here -->
</ion-content>
In the code you need to use a #ViewChild to get a code reference to the ion-content then you can use its ScrollToPoint() api:
import { Component, ViewChild } from '#angular/core';
import { Platform, IonContent } from '#ionic/angular';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
// This property will save the callback which we can unsubscribe when we leave this view
public unsubscribeBackEvent: any;
#ViewChild(IonContent) content: IonContent;
constructor(
private platform: Platform
) { }
//Called when view is loaded as ionViewDidLoad() removed from Ionic v4
ngOnInit(){
this.initializeBackButtonCustomHandler();
}
//Called when view is left
ionViewWillLeave() {
// Unregister the custom back button action for this page
this.unsubscribeBackEvent && this.unsubscribeBackEvent();
}
initializeBackButtonCustomHandler(): void {
this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999, () => {
this.content.scrollToPoint(0,0,1500);
});
/* here priority 101 will be greater then 100
if we have registerBackButtonAction in app.component.ts */
}
}
I want to know which function is called when we click ion-navbar back button by default in ionic 3.
I want to call the same function on hardware back button click.
You can use registerBackButtonAction of Platform Service.
You can override hardware back button action as below inside app.component.ts.
Remember to call registerBackButtonAction after Platform.ready().
import { Platform, App } from 'ionic-angular';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(public platform: Platform, private app: App) {
this.platform.ready().then(() => {
this.platform.registerBackButtonAction(() => {
let nav = this.app.getActiveNav()
if (nav.canGoBack()) {
// If there are pages in navigation stack go one page back
// You can change this according to your requirement
nav.pop();
} else {
// If there are no pages in navigation stack you can show a message to app user
console.log("You cannot go back");
// Or else you can exit from the app
this.platform.exitApp();
}
});
});
}
}
Hope this will help you.
I try to push a new page with tabs in my app. However, I found when I click the button (add friends), the new page popup from right side and the background page suddenly disappears. when I click back button on the top left in new page(component). you will find that the background layer only shows white, and after the new page closing completely, the welcome page shows again.
example:
you can see my code below:
Here is the code if you need: https://stackblitz.com/edit/ionic-mfc3ga
open the link in Chrome
clicking "open in new window" on the top right of the page.
In new window, open development tools(Chrome) and switch to mobile model(toggle device toolbar) and please refresh the browser.
clicking the "add friend button" on the top right.
you will see the background page(Welcome to Ionic) disappearing when the new page slides from right to left.
In addition, when you click back button on the top left in new page(component). you will find that the background layer only shows
white, and after the new page closing completely, the welcome page
shows again.
I have no idea what's wrong with my code.
Thanks Everyone
delete import { AboutPage } from '../about/about'; to AboutPage
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
// import { AboutPage } from '../about/about'; DELETE THIS
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
tab1Root = HomePage;
// tab2Root = AboutPage;
tab3Root = ContactPage;
constructor(public navCtrl: NavController) {
}
}
in app.module.ts
remove: AboutPage, ContactPage, HomePage, TabsPage on =>> entryComponents
entryComponents: [
MyApp,
],
and it works well ))
I want to hide my tabs when the keyboard is open, and show the tabs again when the keyboard is closed.
I know that I can go just for "AdjustSpan", and thats it, but the problem is that if I do that, the keyboard also hides an input that I have for a chat, because its a footer.
Whats the best way to hide the tabs?
I already tried with [ngClass] in , I tried with Keyboard.disableScroll, and also in app.module.ts using the parameters scrollAssist and autoFocusAssist with false value...
Nothing seems to work.
Any idea of how should I hide the tabs??
Thank you in advance!!
You have to add an eventlistener for keyboard-interaction to add (or remove) some css class to the body-tag. In ionic1 the class "hide-on-keyboard-open" was added by default from the framework. In ionic2 you have to walk the "custom-implementation-path". So, here is what you are looking for:
1) Install keyboard-plugin and node_modules as described in ionic2 docs:
ionic plugin add ionic-plugin-keyboard
npm install --save #ionic-native/keyboard
https://ionicframework.com/docs/native/keyboard/
2) Add the plugin to your app.modules.ts
3) Add the desired eventlister withiin the device-ready event in your app.component.ts:
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.keyboard.onKeyboardShow().subscribe(() => {
document.body.classList.add('keyboard-is-open');
});
this.keyboard.onKeyboardHide().subscribe(() => {
document.body.classList.remove('keyboard-is-open');
});
})
4) Add the class defintion to your app.scss with a additional class-attribute (hideElementOnKeyboardShown)
body.keyboard-is-open .hideElementOnKeyboardShown{
display: none;
}
5) Add the class to the desired element, eg an footer, div or sth else:
<ion-footer class="hideElementOnKeyboardShown">
<button round ion-button (click)="onLogin()" block>
<ion-icon name="logo-facebook" padding></ion-icon>
Login
</button>
</ion-footer>
6) in this case, put the ion-footer tag within the content-tag, otherwise the calculated viewheight isnt correct when keyboard is shown.
have a nice day!
just add the following lines to your config.xml..
<platform name="android">
<preference name="android-
manifest/application/activity/#android:windowSoftInputMode"
value="adjustPan" />
....
</platform>
What this does is modify the default value that Cordova writes to your AndroidManifest.xml to control the global keyboard input behaviour for your app.
You can achieve that by writing a directive that subscribes to the Keyboard events and then adds(hide)/removes(show) a css property/class (display: none) to the tabs element once the keyboard is shown/hidden.
#Directive({
selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
private static CSS_CLASS_NAME = 'hide-tab-bar';
private show: Subscription;
private hide: Subscription;
constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {
platform.ready().then(() => {
this.show = keyboard.onKeyboardShow().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
);
this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
);
});
}
ngOnDestroy(): void {
if (this.hide !== undefined) {
this.hide.unsubscribe();
}
if (this.show !== undefined) {
this.show.unsubscribe();
}
}
}
add css class in app.scss (for example):
.hide-tabs {
display: none;
}
on your tabs element <ion-tabs hideTabs> </ion-tabs>
**code added for proof of concept
I am using tabbed view in my Ionic 2 RC0 App. When I do this.nav.push the new page is getting opened in the tab instead of opening as a new page? What am I doing wrong here?
export class Tab1Page {
constructor(public nav: NavController) {
}
editRecord(index){
this.nav.push(MyCustomPage, {indexoEdit: index});
}
}
If you do not want to see tabs when navigating to a subpage then set tabsHideOnSubPages to true in your config. See the docs below:
https://ionicframework.com/docs/v2/api/config/Config/
You can try in this way
constructor(public nav: NavController,private app: App) {
}
editRecord(index){
this.app.getRootNav().push(MyCustomPage, {indexoEdit: index});
}