navbar doesn´t allow scroll in IOS devices


Topic: navbar doesn´t allow scroll in IOS devices

Quiles Estruch asked 5 years ago

Hello everybody.when i use the menu navbar, only on iphone doesn´t scroll, but i remove this element the touch or scroll it´s working, i don´t understand that´s happened my version : 7.5.1

Resources (screenshots, code snippets etc.)

<mdb-side-nav #sidenav class="sn-bg-1 black-skin" [fixed]="false">


  <mdb-navbar-brand>
    <div><!-- añadimos ul por div para cumplir WAI mejorar la accesibilidad -->
    <div> <!-- li por div -->
      <div class="logo-wrapper waves-light">
        <a  (click)="goHome()">
          <img src="assets/logo-400.png" class="img-fluid flex-center" alt='Logo'>
        </a>
      </div>
    </div>
   </div>
    <!--/. Logo -->
  </mdb-navbar-brand>




  <links>
    <!--Social-->

    <div *ngIf="showSocial"><!-- modificamos el li por div para aumentar wai -->
      <ul class="social">
        <li>
          <a class="icons-sm fb-ic">
            <i class="fab fa-facebook-f"> </i>
          </a>
        </li>
        <li>
          <a class="icons-sm pin-ic">
            <i class="fab fa-pinterest"> </i>
          </a>
        </li>
        <li>
          <a class="icons-sm gplus-ic">
            <i class="fab fa-google-plus"> </i>
          </a>
        </li>
        <li>
          <a class="icons-sm tw-ic">
            <i class="fab fa-twitter"> </i>
          </a>
        </li>
      </ul>
    </div>
    <!--/Social-->
    <!--Search Form-->
    <div *ngIf="showSearch"><!-- cambiar li por div -->
      <form class="search-form"  role="search" >
        <div class="form-group md-form mt-0 pt-1 waves-light"  mdbWavesEffect>
          <input type="text" class="form-control" aria-label="City search" placeholder="City search...">
        </div>
      </form>
    </div>
    <!--/.Search Form-->
    <!-- Side navigation links -->
    <li>
      <div class="collapsible collapsible-accordion"><!-- cambio de ul por div mejorar usabilidad  -->
        <mdb-accordion [multiple]="false" aria-multiselectable="false">

          <mdb-accordion-item class="no-collase">
            <mdb-accordion-item-head mdbWavesEffect (click)="goHome()">
              <i class="fas fa-home"></i> Home
            </mdb-accordion-item-head>
            <mdb-accordion-item-body></mdb-accordion-item-body>
          </mdb-accordion-item>
          <mdb-accordion-item class="no-collase" *ngIf="checkRole()">
              <mdb-accordion-item-head mdbWavesEffect (click)="navigation('users')">
                <i class="fas fa-user"></i> Users
              </mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
          </mdb-accordion-item>
          <mdb-accordion-item class="no-collase" *ngIf="!checkRole()">
              <mdb-accordion-item-head mdbWavesEffect (click)="navigation('documents-proposal')">
                <i class="fas fa-user"></i> Documents proposal
              </mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
          </mdb-accordion-item>

          <mdb-accordion-item class="no-collase" *ngIf="checkRole()">
            <mdb-accordion-item-head mdbWavesEffect (click)="navigation('documents')">
              <i class="fas fa-file-image"></i> Documents
            </mdb-accordion-item-head>
            <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

          <mdb-accordion-item *ngIf="false">
            <mdb-accordion-item-head mdbWavesEffect>
              <i class="fas fa-folder-open"></i> Repository 
            </mdb-accordion-item-head>
            <mdb-accordion-item-body>
              <ul>
                <li>
                  <a href="#" mdbWavesEffect>By title</a>
                </li>
                <li>
                  <a href="#" mdbWavesEffect>By country</a>
                </li>
              </ul>
            </mdb-accordion-item-body>
          </mdb-accordion-item>

          <!-- Simple link -->
          <!--
          <mdb-accordion-item class="no-collase">
            <mdb-accordion-item-head mdbWavesEffect (click)="goMap()">
              <i class="fas fa-globe-europe"></i> Maps
            </mdb-accordion-item-head>
            <mdb-accordion-item-body></mdb-accordion-item-body>
          </mdb-accordion-item>
          -->

          <!-- Collapsible link -->
          <mdb-accordion-item *ngIf="false">
            <mdb-accordion-item-head mdbWavesEffect>
              <i class="fas fa-file-upload"></i> Send content
            </mdb-accordion-item-head>
            <mdb-accordion-item-body>
              <ul>
                <li>
                  <a href="#" mdbWavesEffect>By title</a>
                </li>
                <li>
                  <a href="#" mdbWavesEffect>By country</a>
                </li>
              </ul>
            </mdb-accordion-item-body>
          </mdb-accordion-item>

          <!-- Simple link -->
          <mdb-accordion-item class="no-collase">
            <mdb-accordion-item-head mdbWavesEffect (click)="goAbout()">
              <i class="fas fa-info-circle"></i> About
            </mdb-accordion-item-head>
            <mdb-accordion-item-body></mdb-accordion-item-body>
          </mdb-accordion-item>

        </mdb-accordion>
      </div>
    </li>
    <!--/. Side navigation links -->
  </links>
  <div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->



<!-- Navbar -->
<!-- scrolling-navbar  fixed-top-->
<mdb-navbar SideClass="navbar navbar-toggleable-md navbar-expand-lg double-nav navbar-dark special-color-dark"
            [containerInside]="false">

  <navlinks class="navbar-container">
    <!-- SideNav slide-out button -->
    <div class="float-left">
      <a (click)="sidenav.toggle()" class="button-collapse hidden-nav-button-collapse">
        <i class="fas fa-bars"></i>
      </a>
    </div>
    <!--/. SideNav slide-out button -->
  </navlinks>

  <mdb-navbar-brand>
      <div class="logo-wrapper waves-light">
        <a  (click)="goHome()">
          <img src="assets/logo-400.png" 
            class="img-fluid flex-center" style="width: 100px" alt='Logo'>
        </a>
      </div>
  </mdb-navbar-brand>

  <navlinks>
    <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav ie-hidden-double-nav">

    <!--Search Form-->
    <li *ngIf="showSearch">
        <form class="search-form" role="search">
          <div class="waves-light" id="hidden-search" mdbWavesEffect style="margin-right: 20px;">
            <input type="text" class="form-control" aria-label="City search" placeholder="City search...">
          </div>
        </form>
      </li>
      <!--/.Search Form-->



      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>
          <i class="fas fa-envelope"></i>
          <span class="clearfix d-none d-sm-inline-block">Contact</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>
          <i class="far fa-comments"></i>
          <span class="clearfix d-none d-sm-inline-block">Support</span>
        </a>
      </li>
      <li class="nav-item" (click)="doLogin()" *ngIf="!isLogged">
        <a class="nav-link waves-light" mdbWavesEffect>
          <i class="fas fa-user"></i>
          <span class="clearfix d-none d-sm-inline-block">{{loggedUser}}</span>
        </a>
      </li>
     <!--  <li class="nav-item" (click)="doLogin()"> -->
      <li class="nav-item  " mdbDropdown *ngIf="isLogged">

        <a mdbDropdownToggle class="nav-link dropdown-toggle userLogging"> <i class="fas fa-user"></i> {{loggedUser}}</a>


                <div class="dropdown-menu dropdown-primary dropdown-menu-right" style="top:43px !important;">



                  <a class="dropdown-item" [routerLink]="['/dashboard/users/edit/',idProfile]">
                    <mdb-icon fas icon="user-alt"></mdb-icon>
                    Profile</a>

                  <div class="divider dropdown-divider"></div>

                  <a class="dropdown-item" mdbWavesEffect (click)="doLogout()">
                     <!--  <i class="fas fa-sign-out-alt"></i> -->
                      <mdb-icon fas icon="sign-out-alt"></mdb-icon>
                      <span class="clearfix  d-sm-inline-block">Logout</span>
                    </a>
                </div>




      </li>


    </ul>
  </navlinks>
</mdb-navbar>

Bartosz Termena staff commented 5 years ago

Dear @Quiles Estruch

I can't reproduce your problem, in my demo app your code works as it should.

Could you show me more of your app? You can send it to my email b.termena@mdbootstrap.com

Also, provide your browser and iphone version, please.

Best, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: Iphone
  • Browser: safari
  • OS: ios
  • Provided sample code: No
  • Provided link: No