I am making an ionic app with version 3.20.0. I’m using alert controller and I add three button ,Annuler ,ok and Scan.
I want to place it like in the photo below:
my css code in ionic like that:
showPrompt() {
this.donebtn = true;
let prompt = this.alertCtrl.create({
title: 'Espace Client',
message: "Tapez votre code secret",
cssClass: 'myalert',
inputs: [{
name: 'code',
placeholder: 'Mot de passe',
type: 'password',
}, ],
buttons: [{
text: '',
handler: data => {
this.scannerCAB();
let pass = this.votreCode;
this.verifierclient(this.codeclient, pass);
// console.log('Barcode data', this.votreCode);
// let pass = data.code;
//this.verifierclient(this.codeclient, pass);
}
},{
text: 'Annuler ',
handler: data => {
}
},
{
text: 'ok ',
handler: data => {
let pass = data.code;
this.verifierclient(this.codeclient, pass);
}
},
]
});
prompt.present({
keyboardClose: false
})
.then(() => this.donebtn = false);
and my css code
.myalert .alert-wrapper {
padding: 0;
flex-wrap: wrap;
input.alert-input:nth-child(1){
flex: 0 0 60%;
max-width: 80%;
}
button.alert-button:nth-child(1) {
background-image:url('../assets/imgs/icon.png');
background-repeat: no-repeat;
background-position: center;
max-width: 40%;
}
}
.myalert button.alert-button-group {
flex: 0 0 50%;
max-width: 50%;
}
.myalert .alert-button-group-vertical {
flex-direction: row;
}