How can you prevent the Bootstrap UI Tabs component from stacking vertically when tabs are added such that they overflow the width of the container?

Question

What I'd like to do is use the bootstrap ui tabs component and make it work such that as tabs are added, the parent div container will just expand where the overflow is hidden and the tabs don't stack vertically. The ngRepeat rendering of the tabs of the component seems to be forcing the vertical stacking of the tabs when the width exceeds the width of the container. In addition to that functionality, I'd like to have buttons on the left and right of the tabs component that allow for scrolling to the overflowed (hidden) tabs.

I have a plunkr project here:

http://plnkr.co/edit/NybUxdTg8Ro7kIuUN5eZ?p=preview

Does anybody have an idea how I can stop the vertical stacking of the tabs and just have them expand horizontally and overflow (hidden) and allow for navigation to the hidden tabs using buttons?

I'm almost to a point where I need to look at using another component.

Answer 1

You can't really scroll items that are floated. In this instance you could override Bootstraps styles so that the tabs are inline-block instead of floating, and then you can do scroll the .nav-tabs like this:

.nav-tabs {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 46px;
}

I've had to add a few other styles to get this working on your Plunkr, mainly because of the buttons. You have your buttons as children of the <ul> which isn't valid. I haven't fixed that, but I've set them to absolutely positioned and recommend you take them out of the <ul>.

Here's an updated Plunnkr - my stylesheet is styles.css.

Answer 2

I realize it's kind of an old question, but I made an Angular directive that does what I think you're looking for: https://github.com/mikejacobson/angular-bootstrap-scrolling-tabs

If you're using ng-repeat to generate your tabs like this:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li ng-class="{ 'active': tab.isActive }" ng-repeat="tab in main.tabs">
    <a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.label}}</a>
  </li>
</ul>

you can replace that ul.nav-tabs element with element directive scrolling-tabs:

<!-- Scrolling Nav tabs -->
<scrolling-tabs tabs="{{main.tabs}}"></scrolling-tabs>

which will keep the tabs in a row if they exceed the width of their container, and left- and right-scroll arrows will show—no horizontal scrollbar—allowing you to scroll the tabs.

Alternatively, if you want to keep your ul.nav-tabs markup and just want to make the tabs scrollable, you can wrap the ul in a div with attribute directive scrolling-tabs-wrapper:

<div scrolling-tabs-wrapper>
  <!-- Standard Bootstrap ul.nav-tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li ng-class="{ 'active': tab.active, 'disabled': tab.disabled }" ng-repeat="tab in main.tabs">
      <a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.title}}</a>
    </li>
  </ul>
</div>

Here's a plunk showing those two options.

You can also use scrolling-tabs-wrapper to wrap Angular UI Bootstrap Tabs tabset elements:

<div scrolling-tabs-wrapper>
  <tabset>
    <tab ng-repeat="tab in main.tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
      {{tab.content}}
    </tab>
  </tabset>
</div>

Here's a plunk showing that option.