Tabbed Boxes in LibGuides will switch from jQuery UI to Bootstrap Tab UI

[tomkeays]

See announcement from Springshare

• https://blog.springshare.com/2020/05/08/may-release/

Scheduled for May 15

There's an FAQ regarding hooks for styling the tabs.

• https://ask.springshare.com/libguides/faq/2573

[tomkeays]

At 3:49, we still have the old jQuery UI tabs. Maybe "end of the day on Friday, May 15" means midnight?

[tomkeays]

The new tabbed boxes differ from the previous ones in that they are constructed using a Bootstrap nav class along with a nav-tabs class. The old jQuery UI styles were scoped so that the Bootstrap stylesheet didn't directly impact them.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#s-lib-ctab-14932159-0" role="tab" data-toggle="tab">Find Books</a></li>
  <li role="presentation"><a href="#s-lib-ctab-14932159-1" role="tab" data-toggle="tab">Find Articles</a></li>
  <li role="presentation"><a href="#s-lib-ctab-14932159-2" role="tab" data-toggle="tab">Research Guides</a></li>
  <li role="presentation"><a href="#s-lib-ctab-14932159-3" role="tab" data-toggle="tab">Course Reserves</a></li>
  <li role="presentation"><a href="#s-lib-ctab-14932159-4" role="tab" data-toggle="tab">About Us</a></li>
</ul>

However, when the new tabs went live (May 18 around 9:30 PM), I saw that there were two display issues.

We have some code on our site designed to improve accessibility (along with better vertical rhythm) by adding a margin-bottom to list items. However the tabs here require margin-bottom: -1px so the active tab covers the top line of the content portion of the box. In addition, we have fiddled with the left margin and padding of lists, so they don't indent as much and that needed to be accommodated in the tabbed list items. Here's some code I added to the "Custom JS/CSS" settings under LibGuides Admin "Look & Feel".

/* Bootstrap UI Tabbed Boxes */

.nav-tabs>li {
  margin-bottom: -1px
}
ul.nav.nav-tabs {
  margin-left: 0;
  padding-left: 1.5em;
}