Make a popover pop over everything

Hi,

I have a form and I used the library IonicTelInput to have a flag with the country code for phone number.

Everything is working my problem here is about display (CSS).
Indeed, when the Input directive is put inside a < ion-item > then the popover with the list of the flag is still behind the next item.

I’m sorry to ask that but I swear I search I can’t find the CSS command to make this list on top of EVERYTHING.

Here is the result :

image807×275 10.4 KB

I tried almost everything with ‘z-index’ nothing works !

At the end, I finally manage to make the list pass above the item below (pass and confirmation), to achieve that I add this to the < ion item >:

.telcode {
  overflow: visible;
  z-index: 2;
}

image834×535 19.6 KB

I also tried to add this to the but it doesn’t work.

Here is the code of the form:

<form [formGroup]="profileForm" (ngSubmit)="saveProfile()">
    <ion-list lines="full" class="ion-no-margin ion-no-padding">
      <ion-item>
        <ion-label position="floating" color="medium">Pseudo<ion-text color="danger">*</ion-text></ion-label>
        <ion-input name="pseudo" formControlName="pseudo" required type="text"></ion-input>
      </ion-item>
      <div class="error" *ngIf="(profileForm.get('pseudo').hasError('required') || profileForm.get('pseudo').hasError('minlength')) && profileForm.get('pseudo').touched">
        <ion-icon name="information-circle-outline"></ion-icon> Champ requis.
      </div>

      <ion-item>
        <ion-label position="floating" color="medium">Nom<ion-text color="danger">*</ion-text></ion-label>
        <ion-input name="username" formControlName="username" required type="text" ></ion-input>
      </ion-item>
      <div class="error" *ngIf="(profileForm.get('username').hasError('required') || profileForm.get('username').hasError('minlength')) && profileForm.get('username').touched">
        <ion-icon name="information-circle-outline"></ion-icon> Champ requis.
      </div>

      <ion-item>
        <ion-label position="floating" color="medium">Description</ion-label>
        <ion-input name="description" formControlName="description" type="text" ></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="floating" color="medium">Email<ion-text color="danger">*</ion-text></ion-label>
        <ion-input name="email" formControlName="email" required type="email" ></ion-input>
      </ion-item>
      <div class="error" *ngIf="(profileForm.get('email').hasError('required') || profileForm.get('email').hasError('pattern')) && profileForm.get('email').touched">
        <ion-icon name="information-circle-outline"></ion-icon> L'email doit etre valide.
      </div>

      <ion-item class="telcode">
        <ion-input><input class="telInput noborder" name="phoneNumber" formControlName="phoneNumber" type="tel" ionicTelInput
                          [ionicTelInputOptions]="{initialCountry: 'FR', onlyCountries: ['al', 'ad', 'at', 'by', 'be', 'ba', 'bg', 'hr', 'cz', 'dk',
                'ee', 'fo', 'fi', 'fr', 'de', 'gi', 'gr', 'va', 'hu', 'is', 'ie', 'it', 'lv',
                'li', 'lt', 'lu', 'mk', 'mt', 'md', 'mc', 'me', 'nl', 'no', 'pl', 'pt', 'ro',
                'ru', 'sm', 'rs', 'sk', 'si', 'es', 'se', 'ch', 'ua', 'gb', 'en', 'us']}"
                          (countryChange)="onCountryChange($event)" />
        </ion-input>
      </ion-item>
      <div class="error" *ngIf="(profileForm.get('phoneNumber').hasError('phoneNumber') || profileForm.get('phoneNumber').hasError('pattern')) && profileForm.get('phoneNumber').touched">
        <ion-icon name="information-circle-outline"></ion-icon> Nombre de digit max: 10.
      </div>

      <ion-item>
        <ion-input name="password" formControlName="password" type="password" placeholder="Mot de passe" required></ion-input>
      </ion-item>
      <div class="error" *ngIf="(profileForm.get('password').hasError('required') || profileForm.get('password').hasError('minlength')) && profileForm.get('password').touched">
        <ion-icon name="information-circle-outline"></ion-icon> Le mot de passe doit contenir 6 caractères minimum.
      </div>
      <ion-item>
        <ion-input name="confirmation"  formControlName="confirmation" type="password" placeholder="Confirmation" required></ion-input>
      </ion-item>
      <div class="error" *ngIf="(profileForm.get('confirmation').hasError('required') || profileForm.get('confirmation').hasError('minlength')) && profileForm.get('confirmation').touched">
        <ion-icon name="information-circle-outline"></ion-icon> Champ requis avec un minium de 6 caractères.
      </div>
      <div class="error" *ngIf="profileForm.hasError('mismatch') && profileForm.get('confirmation').touched">
        <ion-icon name="information-circle-outline"></ion-icon> Ce champ doit etre identique au mot de passe.
      </div>

    </ion-list>

    <div class="ion-padding">
      <ion-button class="ion-no-margin ion-margin-top" expand="block" type="submit" color="primary" shape="round">Enregistrer</ion-button>
    </div>
  </form>

Thanks for your help.
Xav

1 post - 1 participant

Read full topic