Not sure if this is a bug or if I’ve done something wrong, but whenever I set up a simple nav + tabcontent (Bootstrap) I have the same 2 problems:
If I set a tab pane to show it will be visible on load but it will remain visible until I actively click the relevant nav tab, so if I click a different tab first then both will show
Even if I set the nav tab to active, it won’t be displayed as active on load. I need to click it.
This video shows it more clearly. Tab A should be active on load and obviously it should disappear if I click on B or C. After I click on A it all works perfectly.
This is the code:
<div class="d-flex flex-column w-75">
<div class="nav w-100 nav-tabs">
<a class="nav-item nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#tabContent1_1">Tab A</a>
<a class="nav-item nav-link" href="#" data-bs-toggle="tab" data-bs-target="#tabContent1_2">Tab B</a>
<a class="nav-item nav-link" href="#" data-bs-toggle="tab" data-bs-target="#tabContent1_3">Tab C</a>
</div>
<div class="tab-content" id="tabContent1">
<div class="tab-pane fade show active" id="tabContent1_1" role="tabpanel">
<p><b>TEXT FOR TAB A - </b>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
</div>
<div class="tab-pane fade" id="tabContent1_2" role="tabpanel">
<p><b>TEXT FOR TAB B - </b>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
</div>
<div class="tab-pane fade" id="tabContent1_3" role="tabpanel">
<p><b>TEXT FOR TAB C - </b>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
</div>
</div>
</div>
</div>```
Is there a workaround or have I made a mistake? It’s driving me nuts!
Something is wrong…
Which version of wappler you use?
php or nodejs?
Do you get any errors on your browser?
Can you please check that bootstrap css and js is normally declared in your page? Check the paths…
This simple setup is working fine for me.
<!doctype html>
<html>
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
</head>
<body is="dmx-app" id="tabs">
<div class="d-flex flex-column">
<div class="nav w-100 nav-tabs">
<a class="nav-item nav-link" href="#" data-bs-toggle="tab" data-bs-target="#tabContent1_1">Link-A</a>
<a class="nav-item nav-link" href="#" data-bs-toggle="tab" data-bs-target="#tabContent1_2">Link-B</a>
<a class="nav-item nav-link" href="#" data-bs-toggle="tab" data-bs-target="#tabContent1_3">Link-C</a>
</div>
<div class="tab-content" id="tabContent1">
<div class="tab-pane fade show active" id="tabContent1_1" role="tabpanel">
<p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
</div>
<div class="tab-pane fade" id="tabContent1_2" role="tabpanel">
<p>Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p>
</div>
<div class="tab-pane fade" id="tabContent1_3" role="tabpanel">
<p>Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p>
</div>
</div>
</div>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Thanks @famousmag. I’m using nodejs and Wappler 6.
Bootstrap css and js all there including navigation js under dmxAppConnect. No errors in the console.
I tried setting up a new blank project just to test this. I added Bootstrap5 (including converting the index page).
Now if I add a tabs with nav to the index page it works perfectly. If I create a blank layout page (other than including bootstrap) and add the tabbed panes to a content page I get the same issue as above.
Bootstrap styling all works and other js-based functions work (e.g accordians). The navigation all works after a click on the first active tab.
Could it be something to do with the order of loading where the script is loading with the main layout and before the content?
On further inspection, I don’t think it’s a Bootstrap issue. The active class is not being applied on the page load and that is causing the problem.
With the index page - on load the first tab has class active
With the content page - on load none of the tabs have class active until I click.
The code is the same on each but even though the link has active class in the code, when it’s on a content page it’s being removed by something when opened in a browser.
So that’s definitely the issue. As a workaround I’ve just manually added the active class using javascript after the page loads. I would have thought that shouldn’t be necessary though and I don’t know what’s removing the active class in the first place.
I cannot help more with this but I would reccomend to create a new blank content page WITHOUT adding bootstrap in the content page and then add the tabs/tabpanes.
Please try that…
Well, if you do that you lose all access to the visual editor for bootstrap components - rows, columns, cards etc. It’ll still work if you hand code it but Wappler takes care of it all anyway so you’re definitely supposed to include the frameworks you want to use.
It’s a DMX / Wappler problem (I’m not sure on the details behind the scenes) but not a Bootstrap one.
Anyway - I appreciate your help in trying to fix it and it has led me to a workaround that does at least achieve the correct behaviour for now
I used a simple javascript function to set a tab as active.
function setActiveTab(tabId) {
var tabLink = document.getElementById(tabId);
if (tabLink) {
tabLink.classList.add("active");
}
}
Then you can call the function with the relevant tabId as required. For me I call it on page load from within the JS file:
document.addEventListener("DOMContentLoaded", function () {
setActiveTab("StartActiveTabID");
// Add more calls for other tabs as needed
// setActiveTab("anotherTabId");
});
You could also call the function from within Wappler based on another trigger event or on page load depending on what you need.
Thanks once again. I followed the advice from @George to uninstall and reinstall Wappler. Behold, this trouble has gone away. I am so relieved. I have spent valuable time on it. Thanks
Hello!
I’m experience this issue as well.
Can’t find what’s the problem. @Teodor Seems like a bug
With bootstrap 5 latest: The first tab is not active, clicking on tab2 overlaps both
With bootstrap 4: The first tab is not active, but there is no overlap
Beta/Stable don’t make any difference.
Here’s the code on a php page.
After some search seems Bootstrap recommends using button:
As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
So changed this: <a> </a>
for this <button> </button>
And now got it working
Behavior is that: Default Tab is not activated, but content from this Tab is still shown.
But when I switch to other tab (which is not Active by default) content from “active” tab is still present.
Feel free to split this report in to separate bug report.
I just tested this already and it works fine in my tests with the latest update.
Make sure all the new files are copied to your server and make sure to clear the browser cache when testing.
