Angular JS UI Bootstrap tabs (ui.bootstrap.tabs) causes page to scroll/jump on select

时间:2015-09-01 23:00:03

标签: angularjs twitter-bootstrap-3 angular-ui-bootstrap

Selecting tabs causes the page to scroll randomly for e.g selecting a tab can scroll the page almost all the way to the top then I would have to scroll down to see the content of the tab, if I select another tab the page scrolls again.

The tabs' content is of variable size some having more elements than others so they are naturally of different heights but I am not sure if this is the reason of the random page scrolling.

I tried some jquery to disable the link default actions with no luck.

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

The other solution which is ugly is that I wrapped the tabset in a div and set a height on the 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>

0 个答案:

没有答案