Dmx-class:active not adding class

Wappler General Bugs
1

======== TEMPLATE BUG FORM ========

Wappler Version : 4.0.5
Operating System : mac
Server Model: node
Database Type:
Hosting Type:
Bootstrap version: 5

Expected behavior

The following nav item should have the active class added when the condition is true:

<a class="nav-item nav-link text-white" href="/market_reports" dmx-class:active="browser1.location.pathparts[0] == 'market_report' ">

Actual behavior

The class is not added.

How to reproduce

Create a nav item:

<a class="nav-item nav-link text-white" href="/market_reports" dmx-class:active="browser1.location.pathparts[0] == 'market_report' ">

Create a route using /market_report/xyz

This should add the active class to the nav item since the pathparts[0] == ‘market_report’ however it is not added.

Screen Shot 2021-09-20 at 5.09.29 PM

If I manually add the class in dev tools, the desired formatting shows up.

Note that in my example the nav item is in a partial that is used within a layout.

1 Like
2

Check the rendered HTML in your browser. I suspect it is applying the active class but the active class for a Navbar Item doesn’t do anything. It might need the team to look into the navigation JS/CSS.

image
image2986×1244 221 KB

Both navbars on this test page have the Home button with active class but neither show differently to the other links. The first Navbar was added as a block from BS5, the second is a direct code copy from the bootstrap example docs.

3

There is a js script controlling which link to be active and it makes the page active when the url matches.
@bpj the active class won’t stay there if toggled manually, as the script sees it doesn’t match the page url.

@mebeingken is the page url matching the navigation href - href="/market_reports"? If not then that is why your class is not applied by the navbar script.

4

My test page does not have the dmx-class toggle but active still doesn’t apply - the class is added but makes not visible difference

5

Well that is exactly what i am saying - you can’t just add an active class to any menu item as the nav script will remove it if the nav link href="" does not match the url!

6

I was afraid that was what is happening.

Any ideas on how to accomplish this? I have several child pages of the main navigation that should show the main nav as active even though the href is different. I’ve used the class toggle before but I guess I was just getting lucky in the other project. I guess I could run some js to add the class later.

8

That has always been an “issue” with child pages and active state for the parent category/url. The script doesn’t really know which page is a child/sub page of which other.
Maybe @patrick can suggest a solution here.

1 Like
9

Short of a solution from Patrick, I’m going to try a formatter since that will happen downstream.

10

Could you add a custom class with bold font-weight different color that is added rather than active something like ken-active?

That shouldn’t get stripped by the nav JS but could apply the styling that you want.

11

That would probably work, but I was hoping to just use the standard ‘active’ class.

Here’s a working prototype using a formatter:

dmx-bind:href="('/market_reports').ifActive('market_report', this)"

dmx.Formatter('string', 'ifActive', function (href, pathPart, el) {
    if (typeof dmx.app !== 'undefined') {
        if (dmx.app.data.browser1.location.pathparts[0] == pathPart) {
            el.classList.add('active');
        }
    }

    return href;
});
12

Here a way to do it with a custom attribute. On your link just add dmx-nav as an attribute. Below code checks if the browser url starts with the same path as the one on the link.

dmx.Attribute('nav', 'mounted', function(node, attr) {
  this.$addBinding('', function() {
    requestAnimationFrame(function() {
      var url = new URL(node.href);
      node.classList.toggle('active', location.pathname.startsWith(url.pathname));
    });
  });
});
1 Like