Topic: Modal forms buttons unclickable on iPhone

pboidi pro asked 5 years ago


Good morning MDB Support.

I'm experiencing a strange behaviour with the modal-forms. Even the copy-pasted example doesn't works on iPhone 6/7/8. Other device like Android phone, iPad, laptop and desktop works normal.

EDIT: The modal is contained in a mdb nav-bar. After some test i've found a way to make the button works: rotate the smartphone in landscape mode and then go back in portrait. Maybe this two details could help

Here is the incriminated snippet

<div mdbModal #frameLogin="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Area Clienti</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frameLogin.hide();">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body mx-3" (keydown)="onKeyDown($event)">
        <div class="md-form mb-5">
          <i class="fas fa-user prefix grey-text"></i>
          <input type="text" [formControl]="username" placeholder="Username" class="form-control validate" mdbInput>
          <mdb-error *ngIf="(submitted && username.value == null) || (username.invalid && (username.dirty || username.touched))"> {{'header_public.warning_username' | translate}}</mdb-error>


        </div>

        <div class="md-form mb-4">
          <i class="fas fa-lock prefix grey-text"></i>
          <input type="password" [formControl]="password" placeholder="Password" class="form-control validate" mdbInput>
          <mdb-error *ngIf="(submitted && password.value == null) || (password.invalid && (password.dirty || password.touched))"> {{'header_public.warning_psw' | translate}}</mdb-error>
        </div>

        <div *ngIf="submitted && error!=''" class="d-flex justify-content-center">
          <span class="error-label">{{ error | translate}}</span>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <div *ngIf="!loading; else loader" [ngClass]="{'col-12 col-md-4': !isIE()}" class=" d-flex justify-content-center">
          <a>
            <button (click)="login();" class="textColorBlack"  size="sm" mdbBtn color="warning" mdbWavesEffect style="cursor:pointer; z-index: 99999999">
            {{'header_public.login' | translate}}
            </button>
          </a>
          <div *ngIf="submitted " class="invalid-feedback">
            {{'header_public.warning_username' | translate}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>-->

Khalid Saud free answered 3 years ago


Same issue, works fine in android-chrome, doesn't work as expected in IOS both chrome and safari.


Arkadiusz Idzikowski staff commented 3 years ago

@Khalid Saud could you provide more details about the code you used? As you can see, we tried to reproduce such behavior on our end, but without success.


Arkadiusz Idzikowski staff answered 5 years ago


Thank you for the code. We tried to reproduce this problem on the devices you mentioned (both on safari and chrome), but without success. If it's possible please send a simple demo app in which this problem occurs to a.idzikowski@mdbootstrap.com. Maybe this bug is caused by some other styles/elements.


pboidi pro answered 5 years ago


The modal code is outside. Here is the incriminated page

  <!-- Navbar brand -->
  <!-- L'img deve essere cambiata-->
  <mdb-navbar-brand [ngClass]="{'full-width':globals.mobile}">
    <span style="display: inline-flex; justify-content: space-between;"  [ngClass]="{'full-width':globals.mobile}">
      <a class="logo navbar-brand" routerLink="/homepage" routerLinkActive="active" style="width:230px; height:84px;">
      <img src="/assets/images/logo_consodata.png" class="img-fluid flex-center" style="width:230px; height:53px;"   [ngClass]="{'nav-margin-top-mobile':globals.mobile, 'mobile':globals.mobile}">
    </a>
    <button *ngIf="globals.mobile" class="textColorBlack navbar-button-max-height margin-right-16" type="button" (click)="clearForm();frameLogin.show();" size="sm" mdbBtn color="warning" mdbWavesEffect>
      <mdb-icon fas icon="user" mdbDropdownToggle></mdb-icon>
    </button></span>
  </mdb-navbar-brand>

  <!-- Collapsible content -->
  <links>

    <!-- Links -->

    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item" *ngIf="!globals.mobile">
        <a class="nav-link">
          <button class="textColorBlack" type="button" (click)="clearForm();frameLogin.show();" size="sm" mdbBtn color="warning" mdbWavesEffect>
            <mdb-icon fas icon="user" mdbDropdownToggle></mdb-icon>
            ACCESSO CLIENTI
          </button>
        </a>
      </li>
    </ul>
  </links>
  <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->






<div mdbModal #frameLogin="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Area Clienti</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frameLogin.hide();">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3" (keydown)="onKeyDown($event)">
        <div class="md-form mb-5">
          <i class="fas fa-user prefix grey-text"></i>
          <input type="text" [formControl]="username" placeholder="Username" class="form-control validate" mdbInput>
          <mdb-error *ngIf="(submitted && username.value == null) || (username.invalid && (username.dirty || username.touched))"> {{'header_public.warning_username' | translate}}</mdb-error>


        </div>

        <div class="md-form mb-4">
          <i class="fas fa-lock prefix grey-text"></i>
          <input type="password" [formControl]="password" placeholder="Password" class="form-control validate" mdbInput>
          <mdb-error *ngIf="(submitted && password.value == null) || (password.invalid && (password.dirty || password.touched))"> {{'header_public.warning_psw' | translate}}</mdb-error>
        </div>

        <div *ngIf="submitted && error!=''" class="d-flex justify-content-center">
          <span class="error-label">{{ error | translate}}</span>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <div *ngIf="!loading; else loader" [ngClass]="{'col-12 col-md-4': !isIE()}" class=" d-flex justify-content-center">
          <a class="nav-link">
            <button (click)="login();" class="textColorBlack"  size="sm" mdbBtn color="warning" mdbWavesEffect style="cursor:pointer; z-index: 99999999">
            {{'header_public.login' | translate}}
            </button>
          </a>
          <div *ngIf="submitted " class="invalid-feedback">
            {{'header_public.warning_username' | translate}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<ng-template #loader>
  <mdb-spinner class="px-5" spinnerType="small" spinnerColor="blue"></mdb-spinner>
</ng-template>

Arkadiusz Idzikowski staff answered 5 years ago


Hello,

How is the modal placed in the mdb-navbar component? You mean that only button responsible for displaying modal is inside mdb-navbar or did you place the whole modal code there as well?

Please provide full html code so we can debug this problem properly.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: iPhone 6/7/8
  • Browser: iOS Chrome
  • OS: iOS 12.1
  • Provided sample code: No
  • Provided link: No