Tab wrapping bug in Tab component

  • 1
  • Problem
  • Updated 6 months ago
  • Solved
  • (Edited)
Hello all!

Just wanted to highlight a bug in the tab component where the tabs don't wrap correctly. It's hard to describe so I made a video... I've seen this in multiple orgs but haven't gotten round to documenting it until now.

Cheers!

Louis

Photo of Louis Skelton

Louis Skelton

  • 4,858 Points 4k badge 2x thumb

Posted 6 months ago

  • 1
Photo of Louis Skelton

Louis Skelton

  • 4,858 Points 4k badge 2x thumb
Ah! I can see that the issue is actually due to this css in the theme:

.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover {
    border-top: 0 solid transparent;
}

If you get rid of the border-top on the active tab the problem goes away. For now I'll just add this to some page CSS.

Cheers!

Louis
(Edited)
Photo of Louis Skelton

Louis Skelton

  • 4,858 Points 4k badge 2x thumb
Last note - so, to fix - apply:
.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover {
    border-top: 1px solid transparent;
}