Closed liemteksun closed 2 years ago
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
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
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
this seems to work
thanks
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