Menu dropdown does not work in Safari.


Topic: Menu dropdown does not work in Safari.

jesustome asked 9 months 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>

Arkadiusz Idzikowski staff commented 9 months 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 commented 8 months 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 8 months 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.


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: MDB4 11.1.0
  • Device: Ipad
  • Browser: Safari
  • OS: IOS 15.0.2
  • Provided sample code: No
  • Provided link: No