[Bug] Nav-Pill Moving-Tab Broken If Active Pill Is 2nd or Greater

[nikolaosinlight]

Version

1.0.9

Reproduction link

https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro/issues/45

Operating System

OS X 11.6.5

Device

Mac

Browser & Version

Chrome Version 104.0.5112.79 (Official Build) (x86_64)

Steps to reproduce

Just take the "pricing.html" example and all is well when the 'active' pill is the 1st one i.e. Monthly

However if you modify the page so the 2nd pill is 'active' on page load it fails with the moving-tab div being broken and just showing a - over the Monthly pill.

See the screen shot at: https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro/issues/45

What is expected?

The second nav pill Annual will have a visible moving-tab over it either if I set it to active OR if I try to set it to active via jQuery

What is actually happening?

The second nav pill has no visible moving-tab over it and instead just shows a - char over the Monthly (1st pill) although the tab pane is clearly showing the correct Annual tab pane

---

Solution

It appears the issue is quite likely in soft-ui-dashboard.js in initNavs() but I do not have the cycles to debug this.

Ideally I need to be able to use jQuery to change nav-pill selected on page load and this should work but it does not: function activeTab(tab){ $('.nav-pills li a').removeClass('active'); $('.tab-content .tab-pane').removeClass('active'); $('a[href="#' + tab + '"]').addClass('active'); $('#' + tab).addClass('active'); $('.nav nav-pills a[href="#' + tab + '"]').tab('show'); $('a[href="#' + tab + '"]').trigger('click'); }; activeTab('annual');

What is odd is that if I resize the window at all the moving-tab appears correctly. Also if I refresh the page some times the moving-tab appears correctly but most of the time it does not as just a -

Additional comments

Hoping someone can easily look into this and resolve as our FAQ is using Nav-Pills and we NEED to be able to load the appropriate tab content based on a URL parameter and right now the moving-tab just becomes a dash and breaks.

We are in the process of releasing a new website and this breaks functionality for the user

[groovemen]

Hello again,

We have find a solution for this issue but until the next product update, we will ask you to make the following changes:

go to assets/js/material-dashboard.js ad scroll down to line 525 and replace the initNavs() function with this one:

function initNavs() {
  total.forEach(function(item, i) {
    var moving_div = document.createElement('div');
    var li_active = item.querySelector(".nav-link.active");
    var tab = li_active.cloneNode();
    tab.innerHTML = "-";

    moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
    moving_div.appendChild(tab);
    item.appendChild(moving_div);

    var list_length = item.getElementsByTagName("li").length;

    moving_div.style.padding = '0px';
    moving_div.style.transition = '.5s ease';

    let li = item.querySelector(".nav-link.active").parentElement;

    if (li) {
      let nodes = Array.from(li.closest('ul').children); // get array
      let index = nodes.indexOf(li) + 1;

      let sum = 0;
      if (item.classList.contains('flex-column')) {
        for (var j = 1; j <= nodes.indexOf(li); j++) {
          sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
        }
        moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
        moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
        moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
      } else {
        for (var j = 1; j <= nodes.indexOf(li); j++) {
          sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
        }
        moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
        moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';

      }
    }

    item.onmouseover = function(event) {
      let target = getEventTarget(event);
      let li = target.closest('li'); // get reference
      if (li) {
        let nodes = Array.from(li.closest('ul').children); // get array
        let index = nodes.indexOf(li) + 1;
        item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function() {
          moving_div = item.querySelector('.moving-tab');
          let sum = 0;
          if (item.classList.contains('flex-column')) {
            for (var j = 1; j <= nodes.indexOf(li); j++) {
              sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
            }
            moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
            moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
          } else {
            for (var j = 1; j <= nodes.indexOf(li); j++) {
              sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
            }
            moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
            moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
          }
        }
      }
    }
  });
}

Hope this information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

[nikolaosinlight]

Thank you for the quick reply and fix.

It now works IFF:

• All pills are rendered horizontally on 1 line
• All pills are rendered vertically on 1 line

However, if some pills overflow onto a 2nd line and you select any of them on the 2nd line (either with mouse or programatically) the highlight box shifts over to the left on the first line and does not wrap onto the 2nd line.

Here is a screen shot of what happens if I click "Sales":

Here is a screen shot of what happens if I click "Promotion":

It would be great if this could get resolved as well.

Thank You,

--Nikolaos

[groovemen]

Hello again,

You can try to change the width of the .nav-wrapper parent div using a different class: .col-lg-10 Please let us know if we can help you with anything else.

Cheers, Stefan

[nikolaosinlight]

Okay. Sure. I can make the navpills take up more horizontal space and not wrap.

While this has its limits if there are way too many pills I guess one can just split the page into multiple pages anyways.

Adjusting the columns along the lines of what you suggested worked. Thanks!

--Nikolaos