I'm working with Ionic 3 on iOS 11. Ever since upgrading to iOS 11, my buttons don't work inside Modals. Specifically speaking, the (click) events don't trigger:
HTML:
<button ion-button (click)="logoutUser()">LOGOUT3</button>
JS:
logoutUser() {
console.log('Logout the user');
}
Does anyone have any idea what might be wrong here?
Make sure you add a z-index to the outer most box in which your button resides.
Related
We are trying to put checkbox and a button in the same row for our android application. We are using Ionic 4 and Cordova 9 to build the Andriod Application.
so we have used the following code snippet:
<ion-content>
<ion-item-sliding *ngFor="let test of testList">
<ion-item>
<!-- check box to select user-->
<ion-checkbox color="secondary" [(ngModel)]="test.testId"
(click)="selectUser(test .testId )" ng-true-value="right" ng-false- value="wrong" > </ion-checkbox>
<!-- button to view user-->
<ion-label text-wrap>
<h3>Test</h3>
<p>Test</p>
<button ion-button color="danger" block (click)="viewUser(test .testId )">View User</button>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-content>
When we click on button then Checkbox click event is being triggered.
Even if we click anywhere in the row in that case Checkbox click event is being called.
Any help would be much appreciated.
Thanks in advance.
I inspected the ion-checkbox element and result that is a bug, or precisely an error of implementation by ionic, ionic bug report.
In short, inside ion-checkbox there is a button that trigger the event click, but the button have css properties to take all width and height of ion-item, and this button is inside of "shadow DOM", so is difficult override its properties.
But if you need a fix temporally.
I saw that this button inside ion-checkbox have a z-index: 2 property, so give a z-index: 3 to ion-label, and with this the space of button not will trigger, but the space of checkbox still work.
add on your .scss of your page
ion-label{
z-index: 3;
}
Also, a recommendation is to disable to effect when click the space of ion-item, that will improve the UX, because show that effect when click on white space and don't trigger an action is bad.
EDIT
My versions of the framework.
I hope I've helped :)
I need a routine on Ionic that calls the cellphone's Keyboard to an ion-input when entering the page.
An example of a page would be:
<ion-content padding>
<form>
<ion-row>
<ion-col>
<ion-input #user name="user" type="text" placeholder="Usuário"></ion-input>
</ion-col>
</ion-row>
</form>
</ion-content>
What I want is to use the Navigating Lifecycle from Ionic (I believe that in this case using the ionViewDidEnter) to bring the focus and the Keyboard in the field automatically, I have already tried some codes but unfortunately sometimes it works and sometimes not, thank you right away.
You can set focus in your textarea in the method ionViewDidEnter and show the keyboard by using keyboard plugin of ionic.
#ViewChild('user') input ;
ionicViewDidEnter(){
setTimeout(() => {
this.input.setFocus();
},150);
this.keyboard.show();
}
I have referred the following links. Please go through it for more information:
https://ionicframework.com/docs/native/keyboard/
https://forum.ionicframework.com/t/setting-focus-to-an-input-in-ionic/62789/4
Set focus on an input with Ionic 2
Previously I had the following code for a Call button
<a button ion-button outline href="tel:123456789"><ion-icon name="ios-call"></ion-icon></a>
It has worked up until RC2, but the button now attempts to call again if I I select cancel.
If I use
</ion-icon>
or
<a ion-button href="tel:123456789"></a>
it will still will attempt to call again after the cancel button is selected.
I am unsure of using the CordovaCallNumberPlugin to use the bypassAppChooser as I try to use plugins sparingly.
This appears to be a bug in Ionic specific to an iOS device. Issue #11510 also issue #11252.
It looks like the ionic team is closing #11252.
the last time I used Ionic was like a year ago. Now I create a new proyect but I realize that all teh css components of ionic had changed but if a try to use something new I cant because I think i'm using an old version.
For instance - this code, I took it from the official docs:
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>
and they show up like plane buttons without style.
But if I write them as I used to, just works.
<button class="button button-positive">
Boton prueba 2
</button>
The thing is as Ionic changed their docs I don't have any reference now to look out so I don't have another alternative to update. Going nuts to accomplish this.
Thanks
In my ionic app, the ion-input simply not render and I don't discovered why, yet.
For example, this code not render:
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
Just the Floating Label appears, but the input effect not works and I cannot type anything.
What am I forgetting?
And more, the input style using the input tag is in bold, and in my own css am not changing the default style.
I am also facing same issue. After googling, came to know this not work in Ionic 1. Ionic version 1 will not support ion-iput. This is supporting from Ionic 1 later versions like ionic 2,etc.
I think that you did not create an Ionic2 application !