Hi !
I create a modalController with this this.modalCtrl.create(ConnexionPage).present();
But when I try to close it by tap outside it, nothing append. In fact, enableBackdropDismiss is true by default so why it doesn’t work please ?
1 Like
Check with chrome debugging tools if there is a transparent area belonging to your modal where you are clicking on, that prevents the backdropDismiss
2 Likes
Yes there is one ! How can I remove it please ?
Can you show your code please? I need the template and css.
<ion-row>
<ion-col id='firstCol'>
<div id=titre>
Indiquez vos identifiants
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-grid id='gridMiddle'>
<form [formGroup]="form1">
<ion-row class='rowCenter' justify-content-center>
<ion-col class='colCenter' col-11>
<ion-item no-padding>
<ion-input #inputEmail (keyup.enter)="inputEmail.focusNext()" formControlName="email" type="email" placeholder="Adresse mail" clearInput="on" onfocus="this.placeholder=''" onblur="this.placeholder='Adresse mail'"></ion-input>
</ion-item>
<p class="errorMessage" *ngIf="submitAttempt && form1.controls.email.hasError('required')">Merci de remplir ce champ.</p>
</ion-col>
</ion-row>
<ion-row class='rowCenter' justify-content-center>
<ion-col class='colCenter' col-11>
<ion-item no-padding>
<ion-input #inputPassword type="{{type}}" placeholder="Mot de passe" formControlName="password" onfocus="this.placeholder=''" onblur="this.placeholder='Mot de passe'"></ion-input>
<button ion-button icon-only item-content clear (click)="showPassword()">
<ion-icon [name]="pwdIcon"></ion-icon>
</button>
</ion-item>
<p class="errorMessage" *ngIf="submitAttempt && form1.controls.password.hasError('required')">Merci de remplir ce champ.</p>
</ion-col>
</ion-row>
</form>
<ion-row class='rowCenter' justify-content-center>
<ion-col class='colCenter' col-11>
<button ion-button id='boutonConnexion' (tap)='connexion()'>Connexion</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
<ion-row id='lienBottom'>
<ion-col>
<ion-grid>
<ion-row justify-content-center style='padding-top: 2rem;'>
<ion-col>
<a (tap)='inscription()'>Créer un compte</a>
</ion-col>
</ion-row>
<ion-row justify-content-center>
<ion-col>
<a>Mot de passe oublié ?</a>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
page-connexion {
$colorPlaceholder: black;
$fontPlaceholder: myFont;
$tailleFontTitre: 3.7rem;
/* ion-footer{
background-color: rgb(218, 218, 218);
height: 100%;
border-top-right-radius: 100px;
border-top-left-radius: 100px;
}
*/
////////////////
ion-footer{
background-color: rgb(218, 218, 218);
height: 90%;
}
#circleBase {
border-radius: 50%;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 10rem;
height: 10rem;
background: rgb(218, 218, 218);
}
#iconMain{
position: absolute;
transform: translateX(30%); //centre l'icone dans le cercle
top: 10px;
}
///////////
#firstCol{
text-align: center;
padding-top: 3rem;
}
#titre{
color: black;
font-size: $tailleFontTitre;
text-align: center;
font-weight: 500;
}
//Couleur placeholder///////////////
.text-input::-moz-placeholder {
font-family: $fontPlaceholder;
color: $colorPlaceholder;
text-align: center;
}
.text-input:-ms-input-placeholder {
font-family: $fontPlaceholder;
color: $colorPlaceholder;
text-align: center;
}
.text-input::-webkit-input-placeholder {
font-family: $fontPlaceholder;
color: $colorPlaceholder;
text-align: center;
}
////////////////////////
.errorMessage{
background-color: rgb(218, 218, 218);;
color: #a83939;
text-align: center;
font-family: calibril;
font-weight: bold;
}
#gridMiddle{
height: 100%;
padding-top: 4rem;
}
//mise en forme des inputs
ion-item{
border-radius: 5px;
height: 7rem;
}
.item-ios{ //border des inputs pour ios
border-radius: 5px;
}
//Mise en forme du texte à l'intérieur de l'input
.text-input{
padding-left: 4rem;
color: black;
text-align: center;
font-size: 2rem;
font-family: $fontPlaceholder;
}
//Gestion de la grille du milieu
.colCenter{
position: initial !important; //permet de focus sur l'input quand on est dedans
padding: 0.4rem;
}
///////////////////
.scroll-content{
padding: 0 !important; //supprimer scroll (partie blanche bas de page) lors de l'apparition du clavier
}
#boutonConnexion{
width: 100%;
margin: 0;
text-transform: none; //Permet de supprimer ls majuscules dans le boutton
font-size: 3rem;
height: 7rem;
border-radius: 5px;
background-color: rgb(93,174,184);
}
a{
color: black;
font-size: 2rem;
}
#lienBottom ion-col{
text-align: center; //centre les lien en bas de la page
}
}
There is my html and css thank for your help !
I looked at my example. It is the modal controller, that creates the component in a ion-page frame. Maybe you have the same problem. Currently I am checking, if it is possible to resize it to the size of the content.
Yes I think because the size of ion-footer is ok but when I inspect it I have a ion-page in all the page…
I added ion-content above the ion-footer and registered a click event handler that calls the method close, that dismisses the modal. Works fine for me.
<ion-content (click)="close()"></ion-content>
<ion-footer padding>
<ion-fab top center edge class="myfab">
<button ion-fab icon-only color="light" mode="ios">
<ion-icon name="logo-twitter"></ion-icon>
</button>
</ion-fab>
<ion-list>
<button ion-item (click)="close()">Close</button>
<ion-item *ngFor="let i of items">{{ i }}</ion-item>
</ion-list>
</ion-footer>
2 Likes
That’s work pretty well thanks !
Essa é a resposta que tanto procurei :olhos do coração: muito Obrigado!!