Angular JS UI Bootstrap tabs (ui.bootstrap.tabs) makes the page scroll / scroll to select

Question

Selecting tabs causes the page to scroll randomly, for example, when you select a tab, you can scroll the page almost to the very top, then I will have to scroll down to see the contents of the tab if I select another tab to scroll the page again.

The contents of the tab have the size of a variable, which has more elements than others, so they, of course, have different heights, but I'm not sure if this is the reason for accidentally scrolling the page.

I tried several jquery to disable the default actions for links with no luck.

$(function () { $('body').on('click', 'a[ng-click="select()"]', function (event) { event.preventDefault(); }); }); 

Another solution that is ugly is that I wrapped the tabset in a div and set the height to div

 <div class="col-md-12" id="profile-nav-tabs" style=" height:500px; overflow-y: auto; overflow-x:hidden "> <tabset justified="true"> <tab heading="{{::strings.profile}}"> <br /> <div ng-include="'tab-profile.php'"></div> </tab> .... more tabs </tabset> </div> 

Answer 1

I ran into the same problem. After tracking the code, I find this to be a tabset directive tabset .

Solution (step by step):

• Change tabset.html , delete [ng-class="{active: tab.active}"]
• Change the [tab] directive scope.$watch('active') .

• Use the angular.element addClass and removeClass to add / remove the active class.

   link: function(scope, elm, attrs, tabsetCtrl, transclude) { scope.$watch('active', function(active) { /*if (active) { tabsetCtrl.select(scope); }*/ var idx = tabsetCtrl.tabs.indexOf(scope); var elmPane = angular.element(elm[0]).parent().next().children()[idx]; //li->ul->div(tab-content)->div(tab-pane) if (active) { tabsetCtrl.select(scope); angular.element(elmPane).addClass('active'); } else { angular.element(elmPane).removeClass('active'); } });