search

Laravel-Backpack / theme-tabler

UI for Backpack v6 that uses Tabler and Bootstrap v5.
MIT License
21 stars 12 forks source link

[Bug] Tabler vertical theme causing dropdown items to overlap when a dropdown item is selected #152

Closed ale1981 closed 7 months ago

ale1981 commented 7 months ago

Bug report

What I did

Set Tabler layout to vertical Select one of the dropdown menu items

What I expected to happen

Navbar dropdown not to overlap other menu items

What happened

When toggling a dropdown it overlaps the menu item below it

image

<li class="nav-item"><a class="nav-link" href="{{ backpack_url('dashboard') }}"><i class="la la-home nav-icon"></i> {{ trans('backpack::base.dashboard') }}</a></li>

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>

<li class="nav-item"><a class="nav-link" href="{{ backpack_url('dashboard') }}"><i class="la la-home nav-icon"></i> {{ trans('backpack::base.dashboard') }}</a></li>

What I've already tried to fix it

Tried all variants of the vertical menu style

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there? Yes

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

### PHP VERSION:
PHP 8.1.2-1ubuntu2.14 (cli) (built: Aug 18 2023 11:41:11) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.2, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.2-1ubuntu2.14, Copyright (c), by Zend Technologies

### LARAVEL VERSION:
10.31.0.0

### BACKPACK PACKAGE VERSIONS:
backpack/basset: 1.2.1
backpack/crud: 6.3.0
backpack/generators: v4.0.2
backpack/pro: 2.0.18
backpack/theme-tabler: 1.1.1
tabacitu commented 7 months ago

Hi @ale1981 ,

Sounds like you might have some problems in your HTML there, some element isn't properly closed or something. Because I see it's working fine in our online demo: https://demo.backpackforlaravel.com/admin/dashboard

https://github.com/Laravel-Backpack/CRUD/assets/1032474/738dd2cc-abcb-4098-bc19-096d501d9535

I recommend you use the menu item components, that could help you not make mistakes in your HTML. Or perhaps take a look at your HTML using Chrome DevTools, it should make it easier to spot if some elements aren't properly closed.

I'm pretty sure this is some error in your HTML so I'll close this. If you think this is a bug in Backpack and can reproduce it in our online demo, please let us know how we can reproduce it there, and I'll reopen. Happy to do that, I make mistakes every day, just like everyone else 😀

Cheers!