6

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.

BrianP
  • 1,857
  • 6
  • 20
  • 27
  • hi, have you been able to come with a good solution for this? I'm also looking for being able to navigate tabs by left and right buttons – Phuong Nguyen Aug 18 '14 at 09:12
  • Voted up just because of the detail in the title. Super clear what is being asked. – M H Aug 17 '17 at 17:28

4 Answers4

12

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.

Community
  • 1
  • 1
davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • 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: http://stackoverflow.com/questions/15985020/how-to-hide-scrollbar-but-still-can-scroll-up-down And add the scrolling with the buttons using jqeury. Huge thanks!!! – BrianP Jan 14 '14 at 14:24
  • One essential piece here is `.nav-tabs > li { float: none; display: inline-block; }` on top of the `.nav-tabs` settings above – Csaba Toth Jul 15 '17 at 05:25
3

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.

MikeJ
  • 2,179
  • 13
  • 16
  • link only posts are discouraged on SO. You should include the relevant information directly into your answer (where possible). – simo.3792 Oct 29 '14 at 00:54
  • Added details. Sorry about the link-only post. – MikeJ Oct 29 '14 at 19:56
  • Thanks for this. I was hoping I wouldn't have to make my own solution for this. – Seiyria Nov 17 '14 at 18:09
  • 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. – Seiyria Nov 18 '14 at 15:38
  • @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. – MikeJ Dec 06 '14 at 19:52
  • 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 Dec 06 '14 at 20:30
  • @MikeJ here is my solution: http://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. – Seiyria Dec 08 '14 at 20:59
  • @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)"))'`. :) – MikeJ Dec 12 '14 at 01:18
  • 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. – Seiyria Dec 12 '14 at 01:37
1

You have overflow:hidden but didn't specify a fixed height for the tabs container.

Try this:

<!DOCTYPE html>
<html ng-app="tabsApp">

  <head>
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
    <script src="example.js"></script>
    <script src="directive.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
  </head>

  <body>
    <div ng-controller="tabsAppCtrl">
      <button class="btn btn-default" style="margin: 10px" ng-click="addTab()">Add Tab</button>
      <input ng-model="tabName" />
      <button class="btn btn-default" ng-click="clearTabs()" style="margin-left: 8px">Clear Tabs</button>
      <my-tabs>
        <tabset style="overflow: hidden; height: 50px">
          <button class="btn-sm btn-default glyphicon glyphicon-chevron-left" style="float: left; margin-top: 22px"></button>
          <tab ng-repeat="tab in tabs" active="tab.active" disabled="tab.disabled">
            <tab-heading style="cursor: pointer">
              <div>
                <span class="glyphicon glyphicon-list-alt"></span>
                <span>{{tab.title}}</span>
                <button class="btn btn-default btn-sm glyphicon glyphicon-remove" ng-click="removeTab(tab)"></button>
              </div>
            </tab-heading>
            {{tab.content}}
          </tab>
          <button class="btn-sm btn-default glyphicon glyphicon-chevron-right" style="float: right; margin-top: 75px;  right: 0px; position: absolute"></button>
        </tabset>
      </my-tabs>  
    </div>
  </body>

</html>

Here's your updated plunkr: http://plnkr.co/edit/Rfa8AYOcLffrn6HqSdgu?p=preview

0

Here is my solution: http://plnkr.co/edit/T2snJI0zqnNTGKte55Ba?p=preview

It's only been tested with angular-ui tabs. It also supports some nifty tooltips on either side telling you what tabs are to the left and right of your current viewport.

The gist of it is this: 

<scrollable-tabset show-tooltips="true">
  <tabset>
    <tab ng-repeat="x in y">...</tab>
  </tabset>
</scrollable-tabset>

You can find a repo here.

Seiyria
  • 2,112
  • 3
  • 25
  • 51