Topic: sidenav right doesn't work

pawled free asked 2 years ago


The right side option doesn't work. Is it a bug? This is my code:

<!-- Sidenav -->
<nav
  id="sidenav-1"
  class="sidenav"
  data-mdb-right="true"
  data-mdb-hidden="true"
>
  <ul class="sidenav-menu">
    <li class="sidenav-item">
      <a class="sidenav-link">
        <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
      >
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
      >
      <ul class="sidenav-collapse show">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
      >
      <ul class="sidenav-collapse">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link"
            >Link 5</a
          >
        </li>
      </ul>
    </li>
  </ul>
</nav>
<!-- Sidenav -->

Grzegorz Bujański staff commented 2 years ago

What exactly doesn't work? I checked this code and everything works fine for me.


pawled free commented 2 years ago

After adding data-mdb-right="true" sidenav stops working. It doesn't appear as previously, after toggler clicking. Without this parameter everything is alright.

It works just in playground mode.


Grzegorz Bujański staff commented 2 years ago

@pawled look at this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3644605 this example uses sidenav with option right. And its working. Can you create a snippet where this option is not working correctly?


CWaite priority answered 2 years ago


I also had this problem - it seemed to be working intermittently, depending on the page content. Then I realised it was not working when the page contents scrolled. As soon as the vertical scrollbar appeared - the right nav stopped working. If you look at the snippet included above - and add content that causes the example to scroll, the right nav stops working. I just added

<h1 style="margin-top:800px;">dfsdfsdfdsfdsfs</h1>

under the nav button in the snippet, and the nav stopped working.

After breaking down the example on the MDB navigation documentation I discovered I needed to add data-mdb-position="absolute" to the sidenav attributes!

<nav id ="sidenav" class="sidenav" data-mdb-right="true" data-mdb-position="absolute" data-mdb-hidden="true">

Hope this helps.


Grzegorz Bujański staff commented 2 years ago

This is just a workaround for the problems. In fact, when I adding extra content there is a problem with opening sidenav. We will fix it as soon as possible.


CWaite priority commented 2 years ago

And I've just noticed this workaround just displays the side-nav off to the right, you get a horizontal scrollbar, so it is not really a good solution. Would be very keen to know when it is fixed - will switch to a left nav for now.


Grzegorz Bujański staff commented 2 years ago

Whenever we release a new version, we inform about it and the information will appear in our changelog.


Danny priority commented 2 years ago

When is this fixed?


Kamila Pieńkowska staff commented 2 years ago

We have added such a task and will include it in the next release.


Danny priority commented 2 years ago

Is there an workaround? I need it asap


Kamila Pieńkowska staff commented 2 years ago

Try this:https://mdbootstrap.com/snippets/standard/kpienkowska/4013747There is data-mdb-position="absolute" and some custom CSS added.


Danny priority commented 2 years ago

Thats not working, nav items will be scrolled above, and when closing you scroll back to the top. Please a good fix


Kamila Pieńkowska staff commented 2 years ago

https://mdbootstrap.com/snippets/standard/kpienkowska/4018053 I hope this is what you need.


Danny priority commented 2 years ago

Now its working, but you have to add position: fixed !important; to #sidenav-1, else its the menu is scrolling to invisible. Thank you, and I hope it will be fixed soon on the right way!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No