Sidebar Content overlaps and for vertical scrollbar

[noblemfd]

I am using admin-LTE v3. I tried to use multi-level menu sidebar

I have something like this:

`<ul class="nav nav-treeview">
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="far fa-dot-circle nav-icon"></i>
              <p>
              {{ trans('global.leave') }}: Line Manager
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="#" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Annual Leave Analysis</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Leave Types</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav nav-treeview">
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="far fa-dot-circle nav-icon"></i>
              <p>
              {{ trans('global.leave') }}: HOD
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="#" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Hist. Statistics: Applied</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Departmental Statistics</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>`

Originally, it appears like this:

As I click on any of the menus, it displays. But when I tried to click on the same menu or other menu below it, everything got distorted and overlaps. It even for short/small horizontal scroll-bar

How do I resolve this?

Thanks

[danny007in]

Convert this as issue 😃

[noblemfd]

@danny007in - How do I convert it to an issue?

[REJack]

This bug comes often from an old jQuery version, try to check if you on the latest.

[danny007in]

just create new issue
by copy paste

[cjcaballero]

Only Update the Jquery version and all function good
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js" type="text/javascript"></script>

[VeillaultAdrien]

Hello !
I have the exact same issue and I have alreay Jquery 3.6.0, Poppers and Bootstrap 4 are up to date. I try with the code from the demo, I also have the issue.