I cannot seem to find a way to change any keyboard behavior in my app. I have tried to use the ionic-native Keyboard plugin, but nothing seems to change.
import { Keyboard } from '#ionic-native/keyboard';
export class NewRepositioningModal {
constructor(private keyboard: Keyboard) {
// I've tried true as well
this.keyboard.hideKeyboardAccessoryBar(false);
}
but I never see any bar, and the only button on the keyboard says "Go". I'm trying to enable tabbing between inputs and can't even get the "Next" button to show.
Related
In Ionic 3, I'm trying to open a modal from within a side menu:
<ion-item menuClose (click)="presentProductModal()"> Add Product</ion-item>
When the side menu is opened, the rest of the screen loses focus. When the modal link is selected, the side menu disappears. However, the modal and the main screen remain unfocused.
I'm guessing there's some timing / promise issue here, but I'm not sure what to do exactly.
Is there some workaround?
Here are two images demonstrating the issue (the "Add Product" link opens the modal):
Thanks in advance!
You can use the menu output event: ion-close.
Listen for this event, and open the modal after menu has closed.
Read more about output events for menu here: menu close event
or
Remove menuClose directive from ion-item. In your click function, close the menu programmatically using close method. Read more about it here: Close menu programmatically.
This method will return a promise which will be resolved when menu is fully closed, you can then open the modal in its resolve.
this.menuController.close(<your menu id>).then(() => {
this.modal.create.....
})
The template for the modal was simply missing wrapping tags.
you can use MenuController
import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
}
If you want to close menu please use close() event
this.menuCtrl.close()
If you want to open menu please use open() event
this.menuCtrl.open();
I've been reading through documentation but can't find a way to disable exit on TAB.
I have a custom editor which contains multiple elements. I want tab to work within the popup editor elements instead of having to use mouse for everything.
one possible workaround is to stop propagation of tab key event
onKeyDown(event: any): void {
if ([9].indexOf(event.keyCode) > -1) {
event.stopPropagation();
}
}
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
Is it possible to override the hardware back button of the BB10 Classic? Pressing the back button on certain screens currently allows users to break the flow of my app.
How can I catch this button press to prevent it from navigating back?
I was able to override the back button by adding a DeviceShortcut with type DeviceShortcuts.BackTap to the qml file for the screen where I want to prevent users from going back.
shortcuts: [
DeviceShortcut {
type: DeviceShortcuts.BackTap
onTriggered: {
// Don't allow the user to navigate back
}
}
]
I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]