Tabs in wrong position, even after using updateTabIndicator()

[ChildishGiant]

The button is clicked programmatically using select() on loading, just after initialisation. The selection is correct but the indicator is off. If I then use updateTabIndicator(), the indicator moves but not to the right place, as it would if the tab was click.

Here's the indicator on loading

Here it is once updateTabIndicator() is called

https://gfycat.com/HollowFailingAntelopegroundsquirrel

• Version used: 1.0.0-beta
• Browser Name and version: Google Chrome | 65.0.3325.181 (Official Build) (64-bit) (cohort: Stable)
• Operating System: Windows 10

[acburst]

Could you make a codepen reproducing the problem? It might have to do with the timing of the select(). Have you tried preselecting a tab instead?

[ChildishGiant]

It seems to have gone since I've been in active development. I've tried making a codepen but I can't reproduce it again. Sorry about that.

[sadikyalcin]

I've just been having the same issue.

I don't have time to create a fiddle which can demonstrate the issue but I'm appending the whole HTML block that has the tabs to another element - which I suspect might be the issue as it could be that the indicator position is being calculated before I move my elements.

Calling tabs.updateTabIndicator(); or resizing the window fixes the issue along with clicking on the tabs though.

[aleksandra-grushko]

this is my solution:

jQuery(document).ready(function(){
    jQuery('.tabs').tabs();
});

window.addEventListener('orientationchange', function() {
  setTimeout(function(){
    jQuery('.tabs').tabs('updateTabIndicator');
  },10)
});

[nategiraudeau]

I have had the same problem and was able to fix it with this CSS: ::-webkit-scrollbar {display: none;}

[rpalacio86]

I solved this problem hiding the indicator and styling the active tab with a bottom border instead:

/* CSS */
.tabs .indicator {
   display: none;
}

.tab a.active {
    border-bottom: 2px solid;
    border-color:  #f6b2b5;
}