[Bug] 2nd tab is not selectable

[liemteksun]

Version

3.0.1

Reproduction link

https://osplit.com/s/material-dashboard-pro-html-v3.0.1/pages/pages/account/invoice2.html

Operating System

Linux

Device

Linux

Browser & Version

Chrome 94.0.4606.71

Steps to reproduce

open the link to minimal reproduction

What is expected?

I expect "Messages" tab to be highlighted

What is actually happening?

What I did was swapping "Messages" and "Social" tab

---

Solution

Additional comments

[groovemen]

Hello @liemteksun,

Thank you for using our products, please make sure that you have integrated the styling and JS script like in the product. We have checked the live preview and also in the downloadable archive, it works as e: https://demos.creative-tim.com/material-dashboard-pro/pages/pages/account/invoice.html All the best, Stefan

[liemteksun]

So probably I don't convey my problem correctly

Clicking the 2nd tab does move the highlighted tab, but that's not the problem that I'm reporting

On https://osplit.com/s/material-dashboard-pro-html-v3.0.1/pages/pages/account/invoice.html, you can see that the 1st tab is highlighted (which is correct)

Now, I tried to make the 2nd tab highlighted (without having the user to do anything) so I swap the 1st li and 2nd li, but now, none of the tab is highlighted - as seen here https://osplit.com/s/material-dashboard-pro-html-v3.0.1/pages/pages/account/invoice2.html

Thanks

[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 518 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

[liemteksun]

this seems to work

thanks