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.

Solution 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.

Solution 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.

Comments

[BrianP]

This is essentially what I was looking for. Now to make it exactly what I wanted, I need to remove the scroll bar and add handlers to allow for traversing the overflowing tabs to the left and right. I can remove the scroll bar like this: stackoverflow.com/questions/15985020/… And add the scrolling with the buttons using jqeury. Huge thanks!!!

[simo.3792]

link only posts are discouraged on SO. You should include the relevant information directly into your answer (where possible).

[MikeJ]

Added details. Sorry about the link-only post.

[Seiyria]

Thanks for this. I was hoping I wouldn't have to make my own solution for this.

[Seiyria]

This actually does way too much work, unfortunately. I need full control over my tab headers since they require some HTML in them. It doesn't seem to work too well with ui.bootstrap as a result. If you were just using standard bootstrap it might be fine though.

[MikeJ]

@Seiyria, thanks for the suggestions. You've probably built your own solution by now, but just FYI I updated the scrolling-tabs directive so it allows HTML in your tab titles. I also created a new directive called scrolling-tabs-wrapper that just wraps your ul.nav-tabs markup rather than replacing it, and can also be used with AngularUI Bootstrap Tabs. I updated my answer with this additional information.

[Seiyria]

I actually have written one that was light and compatible with ui-tabs, but thanks for going forward and doing that as well. I'll be sure to update you here with my solution as well.

[Seiyria]

@MikeJ here is my solution: stackoverflow.com/a/27366793/926845 -- we had a business requirement to have tooltips on either side to show what is to your left and right, so those had to be a part of my solution.

[MikeJ]

@Seiyria, I like your solution. The tooltips are a nice feature. And I'm glad you included a comment in your code explaining the selector '*:not(:has("*:not(span)"))'. :)

[Seiyria]

Thanks @MikeJ! I'm glad I had a comment there too, that selector was a bit ridiculous. I liked your solution too, but as it turned out, there were those business requirements. Go figure.

[Csaba Toth]

One essential piece here is .nav-tabs > li { float: none; display: inline-block; } on top of the .nav-tabs settings above