[BS4] active class

[robsdedude]

Bootstrap 4 sets the active class on the anchor elements rather than the li elements. This causes

$('#input-widget').scrollingTabs({
        tabs: [{..., active: true}],
});

not to work properly (no visual indication of activeness) with BS4. My suggestion (quick fix) is to add the active class to both the as and the lis. I've tested it on BS4 and it looks fine. I'm not sure what BS3 would do with that.

[robsdedude]

I'd be happy to open a PR if you want that quick fix.

[robsdedude]

I'm so sorry. I've overlooked the bootstrapVersion: 4 option. To help people find things quicker an overview (with links to details) of the methods, options, and events at the top of the README might be helpful. Similar to this https://api.jqueryui.com/autocomplete/.

However, even if using bootstrapVersion: 4 the problem above persists. I'll try to build a minimal example.

[robsdedude]

Here it is: https://jsfiddle.net/gn8Lqyt6/4/ As you can see the first tab isn't shown as active, even though the data marks it as active.

I also noticed that I still had to run $('.scrtabs-tabs-movable-container').find('li').addClass('nav-item').find('a').addClass('nav-link'); in order to make it all good-looking. Is there a reason why the lib doesn't fix this (without my intervention) if it knows I want to use BS4?

[mikejacobson]

Yeah, sorry, I never really established Bootstrap 4 support for data-driven tabs. The requests for BS4 support came from people using html-defined tabs, so I got it working for that use case but never pursued it further to support data-driven tabs.

Sorry about that. That's something I should have included in the README.

And I like your suggestion about adding an overview to the README. The options list has steadily grown over the years and it does seem to be long enough now that forcing the user to scroll through the entire page to see all the available options is not very user-friendly.