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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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
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.