Sidenav selection not applying `active` class

Topic: Sidenav selection not applying `active` class

jfaz premium asked 2 years 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

Add comment

Grzegorz Bujański staff answered 2 years ago

1 0 Best answer

You import scripts in <code><head></code>. 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 <code>mdb.min.js</code> file, our components are initialized automatically - they look for appropriate elements on the page and the component init is executed. In this case, <code>mdb.min.js</code> is loaded before anything else appears on the page. Therefore auto init was not executed.

If you leave <code>mdb.min.js</code> import in <code><head></code> 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: <a href="https://mdbootstrap.com/docs/standard/navigation/sidenav/#docsTabsAPI" target="_blank">https://mdbootstrap.com/docs/standard/navigation/sidenav/#docsTabsAPI</a> 
you should choose via JavaScript init

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

Please insert min. 20 characters.

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 2 years ago

hey, importing it at the end worked!

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

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 2 years 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 2 years 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

Please insert min. 15 characters.

jfaz premium commented 2 years 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 2 years 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 2 years 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.

Please insert min. 15 characters.

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

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 2 years 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.

Please insert min. 15 characters.

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

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 2 years 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 2 years 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 2 years 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.

Please insert min. 15 characters.

Add comment

Write

Create snippet

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

jfaz

Premium support 10Support score
2Questions 0Answers 1Snippets