1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: Sidenav selection not applying `active` class

jfaz premium asked 1 year ago

Expected behavior

When an item in sidenav is selected, active class gets applied to it and it looks highlighted.

Actual behavior

Sidenav item works just like a normal button and doesn't activate and stay highlighted. Inspecting the element while clicking will show it's not having the active class applied to it when selected.

Resources (screenshots, code snippets etc.)

Includes:

<link rel="stylesheet" href="/sidenav.min.css">
<link rel="stylesheet" href="/navbar.min.css">
<link rel="stylesheet" href="/mdb.min.css">
<script type="text/javascript" src="sidenav.min.js"></script>
<script type="text/javascript" src="navbar.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>

Navbar:

    <header>
        <nav id="main-sidenav" class="sidenav sidenav-light" data-mdb-hidden="false" data-mdb-color="light" style="background-color: #2d2c2c">
            <ul class="sidenav-menu">
                <li class="sidenav-item">
                    <a class="sidenav-link ripple" role="button">
                        Home
                    </a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link ripple" role="button">
                        Test
                    </a>
                </li>
            </ul>
        </nav>
    </header>

Video: https://emalm.com/?v=CmJdK

Grzegorz Bujański staff answered 1 year ago

You import scripts in <head>. Remember that the code is executed top-down. In this case, the MDB package is loaded first, and then the HMTL code is added. We recommend loading our package at the end of the body.

After loading the mdb.min.js file, our components are initialized automatically - they look for appropriate elements on the page and the component init is executed. In this case, mdb.min.js is loaded before anything else appears on the page. Therefore auto init was not executed.

If you leave mdb.min.js import in <head> you have to initialize each component manually. Information on how to do this can be found in the documentation in the api tab. For Sidenav you find api here: https://mdbootstrap.com/docs/standard/navigation/sidenav/#docsTabsAPI you should choose via JavaScript init

But as I mentioned earlier - we recommend importing the package at the end of the body

jfaz premium commented 1 year ago

hey, importing it at the end worked!

Grzegorz Bujański staff answered 1 year ago

I created a snippet in which I tested adding an active class and added styles for an element with an active class. everything worked fine: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4086397#css-tab-view

Please prepare a snippet in which the problem you described will be visible.

jfaz premium commented 1 year ago

Hey again, I can't replicate the issue with a snippet. It might be that mdbootstrap snippets import a different version of the libraries or something like that, because I've tested it on different systems already using the official binaries from the service page and I have the same issue. Could you please try replicating the issue using the about-us template included in the MDB4 official package under the templates folder?

Grzegorz Bujański staff commented 1 year ago

Honestly it doesn't make sense. This template was created for MDB4 and would require a lot of changes. Besides, I would have to change sidenav to the one from MDB5 and import MDB5 instead of MDB4. So in the end I would get the same as what is currently in the snippet

Maybe the problem is really with the imports? What exactly files are you importing? in the first post I see some styles, but they do not work (incorrect link) additionally it looks like you added the entire MDB library + separately navbar and sidenav (which are already in the MDB package). The most important thing is whether you import a pro package, not a free

jfaz premium commented 1 year ago

Again, to test, you don't use anything from MDB5. It's just the same issue I have in MDB5 is also on MDB4. All you have to do is download the MDB4 zip, extract it, and open the template. Nothing else. And you will see the issue with a completely untouched MDB4.

Grzegorz Bujański staff commented 1 year ago

Components in MDB4 may work differently than in MDB5. In this case In MDB4, the active class was not added to the element that was selected. We just didn't add it to the component

jfaz premium commented 1 year ago

Interesting... so this snippet works: https://mdbootstrap.com/snippets/standard/jfaz/4099272#html-tab-view However if I copy paste that exact same code into an html file and include the libraries, it doesn't work. Here's the pastebin: https://pastebin.com/vbsDUdKz Should I be including anything else? Just make a test.html file in the root folder of MDB5-STANDARD-UI-KIT-Pro-Essential-4.2.0 and paste that.

Grzegorz Bujański staff answered 1 year ago

It looks like you have access to MDB4 jQuery and you are trying to use MDB5 in it. This requires the purchase of the MDB5 Standard package. Code from MDB5 will not work in MDB4 and the components look different. Here you will find documentation for MDB4 Sidenav: https://mdbootstrap.com/docs/b4/jquery/navigation/sidenav/

jfaz premium commented 1 year ago

Hey again, I am not using MDB4 jQuery, only MDB5.

I pointed out the MDB4 jQuery package because you can see the same issue I was having in my own project with MDB5, in the templates included in MDB4. It's one of the templates that comes with MDB4, completely untouched, no MDB5 included in it. If you open up the about-us template, or any template with a navbar, you'll see the issue I am describing.

The reason I brought up MDB4 is because the MDB5 package does not come with any templates. But the issue is the same, with MDB4 jQuery or with MDB5 standard.

Grzegorz Bujański staff answered 1 year ago

in the last update, we update the styles of our components. Therefore, in the new version it does not look like before. You can change it easily by adding a few styles:

.sidenav a.active {
    background-color: rgba(18,102,241,.05);
}

.sidenav .sidenav-link.active {
    color: #1266f1;
}

jfaz premium commented 1 year ago

Thank you for the response! Unfortunately this did not work. Look at the video I posted, it's not actually applying the active class to the item being clicked. I tried adding the styles you posted and it didn't work, just looks the exact same. When I click on the item it only adds the ripple-surface class (which then disappears like it should.)

Grzegorz Bujański staff commented 1 year ago

Do you have any errors in your console? Create a snippet with this problem, I'll check what's going on

jfaz premium commented 1 year ago

No errors. I found an easy way to test it, just download the MDB4-jQuery-UI-KIT-Pro-Essential-4.20.0 file and extract it. Open up templates/about-us.html, and it will have a navbar at the top. Click any item other than home and it will scroll you down to where it's supposed to, but the navbar will remain identical, and if you inspect the item you clicked, you will see it does not have the active class. This way of doing it does yield a CORS error, but in my own project there are no errors so I'm pretty sure it's unrelated. Also, I'm using MDB5 for my own project, so this means the issue is happening on both versions.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.2.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: Yes
Tags
sidenav
About author
jfaz
Premium support 10Support score
2Questions 0Answers 1Snippets