Nav-link on "Tabs with nav" doesn't work

Wappler General Bugs
1

In Bootstrap tab component, nav-link should be a button as suggested in the Bootstrap Docs:

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.

This doesn’t work:
<a class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Home</a>

It should be like this:
<button class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Home</button>

1 Like
2

But it still seems to be working fine or is it not working for you? Could there be another reason?

<ul class="nav mt-3 mb-3 pb-0 bg-warning bg-opacity-50 text-white nav-justified nav-pills" id="navTabs1_tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true" dmx-on:click="calendar_events.updateSize()">Calendar</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="navTabs1_5_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_5" role="tab" aria-controls="navTabs1_1" aria-selected="true">Riders details</a>
    </li>
3

Hey @vv-a2007 thanks for the reply
It’s not working for me, same case as described on this topic:

Changing from link to button fix the issue for me

4

Now I have the same problem, everywhere I use Tabs - I have a suspicion that this happened after I switched to the Beta channel and back to Stable. In general, it seems that when switching back, not everything returns to its original state, as for example here it is clearly visible in the interface

5

I saw your topic but I don’t know if it is completely related to this.
The workaround doesn’t work for you?

You can do a force update, maybe that solves some issues…

6

I meant that perhaps the root cause of the fact that it stopped working lies at some more general level. I hope they find it and fix it. Force update unfortunately did not solve the problem.

And your workaround is if you change to in the code - and you don’t need to change anything else?

7

@vv-a2007
Your formatters issue has nothing to do with the issue reported in this topic.

9

Perhaps it was just a coincidence, but it is suspicious that all the problems appeared at the same time after switching between channels, before that everything worked.

10

It’s not my case @vv-a2007
In this issue it’s enough to add tabs with nav component and won’t work until change the <a> tag and replace it to <button>. Maybe it’s a bootstrap thing.
But do you have something I can try for you?

11

I followed your advice - replaced with - and it works, thanks :laughing:

12

Glad it helped my friend :slight_smile:

1 Like
14

The issue here is caused by a conflict between the tabs and the bootstrap navigation script, it’s not about using <a> or <button> for the tabs. Using <a> is perfectly fine and not wrong.
This will be fixed in the next update.

1 Like
15

Fixed in Wappler 6.3.2

17

This topic was automatically closed after 26 hours. New replies are no longer allowed.