Problem/Motivation

An active local task gets the "nav-link" class on its surround nav-item (li tag). Looking at bootstrap reference implemtation of navs and tabs, this seems wrong.

Steps to reproduce

Check the active item in a nav tab element in bootstrap5 theme (e. g. the view tab of the node operations when logged in). The view tab is the active tab and it does get the "nav-link" class as well as the "nav-item" class on its surrounding li-tag.

Proposed resolution

do not add nav-link class to the surrounding element

Remaining tasks

create a patch

User interface changes

Active tab implementation will be more in line with bootstrap reference implementation

API changes

none

Data model changes

none

Comments

stefan.korn created an issue. See original summary.

stefan.korn’s picture

Status: Active » Needs review
StatusFileSize
new417 bytes
ressa’s picture

Status: Needs review » Needs work

Thanks @stefan.korn, your patch makes the mark up more in line with Bootstrap. However, applying this patch alone makes the "View" tab look funny, but if I add the patch from #3277454: Active local task should carry nav-link class as well, it looks better. So perhaps close that issue, and add the patch here, for a combined solution?

rbruch’s picture

Now that #3277454 has landed in 2.0.6, the View tab has two borders, one on the <li> tag and one on the <a> tag. This is because of this issue, i.e., the <li> tag has the nav-link class, when it should not. The Bootstrap docs are clear for both Bootstrap 5.1 and Bootstrap 5.2: the <li> tag should have the nav-item class, and the <a> tag should have the nav-link class.

Can we get this patch included in version Bootstrap5 theme version 2.0.x, as well as possibly version 3.0.x?

rbruch’s picture

Version: 1.1.x-dev » 2.0.6
Status: Needs work » Needs review
mustanggb’s picture

I'm seeing the same as rbruch, since 2.0.6 active tabs now have a double border.

Removing nav-link from the <li> does fix it.

crutch’s picture

Using this for now seems to work well.

.tabs-primary .nav-tabs>.nav-link {
margin-bottom: 0;
padding: 0;
border: none;
}
jannakha’s picture

Status: Needs review » Reviewed & tested by the community

this patch is working as expected.
please merge to v2 and v3

vladimiraus’s picture

vladimiraus’s picture

Version: 2.0.6 » 2.0.x-dev
Status: Reviewed & tested by the community » Fixed

Thank you! Committed! 🥃

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.