Topic: Menu dropdown does not work in Safari.
jesustome free asked 3 years ago
Expected behavior Dropdown menu that is displayed when clicking on it.
Actual behavior In Chrome it works correctly, but Safari does not display when clicking on a menu option.
Resources (screenshots, code snippets etc.) I am using ng-uikit-pro-standard v.11.0.0 and angular v.11-0-2.
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
<links>
<ul class="navbar-nav">
<li class="nav-item text-center">
<a class="nav-link waves-light" routerLink="/dashboard" mdbRippleRadius>
<span class="oi oi-home"></span> <br />
{{'menu.dashboard' | translate}}
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link waves-light" routerLink="/distributor" mdbRippleRadius>
<span class="oi oi-globe"></span> <br />
{{'menu.distributors' | translate}}
</a>
</li>
<li class="nav-item dropdown btn-group text-center" dropdown>
<a class="nav-link dropdown-toggle waves-light w-100" mdbRippleRadius>
<span class="oi oi-star"></span> <br />
{{'menu.customers' | translate}}
</a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary text-center" role="menu">
<a class="dropdown-item waves-light" routerLink="/customer" mdbRippleRadius>{{'menu.customersManagement' | translate}}</a>
<a class="dropdown-item waves-light" routerLink="/customer/center" mdbRippleRadius>{{'menu.centersManagement' | translate}}</a>
<div class="divider dropdown-divider"></div>
</div>
</li>
<li class="nav-item text-center">
<a class="nav-link waves-light" routerLink="/user" mdbRippleRadius>
<span class="oi oi-person"></span> <br />
{{'menu.users' | translate}}
</a>
</li>
<li class="nav-item dropdown btn-group text-center" dropdown *ngIf="superUser">
<a class="nav-link dropdown-toggle waves-light w-100" mdbRippleRadius>
<span class="oi oi-dollar"></span> <br />
{{'menu.billing' | translate}}
</a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary text-center" role="menu">
<a class="dropdown-item waves-light" routerLink="/billing/invoice-reports" mdbRippleRadius>{{'menu.invoiceReport' | translate}}</a>
</div>
</li>
<li class="nav-item dropdown btn-group text-center" dropdown *ngIf="superUser">
<a class="nav-link dropdown-toggle waves-light w-100" mdbRippleRadius>
<span class="oi oi-code"></span> <br />
{{'menu.integrations' | translate}}
</a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary text-center" role="menu">
<a class="dropdown-item waves-light" routerLink="/deliverect-accounts" mdbRippleRadius>{{'menu.deliverect' | translate}}</a>
<a class="dropdown-item waves-light" routerLink="/applications" mdbRippleRadius>{{'menu.applications' | translate}}</a>
</div>
</li>
<li class="nav-item dropdown btn-group text-center" dropdown *ngIf="superUser">
<a class="nav-link dropdown-toggle waves-light w-100" mdbRippleRadius>
<span class="oi oi-cog"></span> <br />
{{'menu.configuration' | translate}}
</a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary text-center" role="menu">
<a class="dropdown-item waves-light" routerLink="/server" mdbRippleRadius>{{'menu.servers' | translate}}</a>
<a class="dropdown-item waves-light" routerLink="/license" mdbRippleRadius>{{'menu.licenses' | translate}}</a>
<a class="dropdown-item waves-light" routerLink="/module" mdbRippleRadius>{{'menu.modules' | translate}}</a>
<a class="dropdown-item waves-light" routerLink="/language" mdbRippleRadius>{{'menu.languages' | translate}}</a>
<a class="dropdown-item waves-light" routerLink="/traceReport" mdbRippleRadius
*ngIf="!isDistributor">{{'menu.traceReport' | translate}}</a>
</div>
</li>
</ul>
</links>
</mdb-navbar>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 11.1.0
- Device: Ipad
- Browser: Safari
- OS: IOS 15.0.2
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
We tried to reproduce this problem on our end but without success. Can you check if the problem still occurs when you try to open dropdowns on this page?
https://ng-demo.mdbootstrap.com/components/dropdowns
jesustome free commented 3 years ago
The dropdown of this page if they are displayed correctly with Safari. Do you have examples where the dropdown is inside a mdb-navbar? which is how i am using it.
Arkadiusz Idzikowski staff commented 3 years ago
@jesustome You can find such examples in our documentation: https://mdbootstrap.com/docs/angular/navigation/navbar/
Please try to use the code provided there or adjust your code accordingly and let me know if that helped.