2

I've been looking for a way to display the tabs on the bottom, but haven't figured it out just yet. (I am using the Tabs directive, obviously)

I found this:

Angular UI Bootstrap Vertical Tabs

But after adding the styles and the class "tabs-below" like so:

<tabset class="tabs-below">
  <tab heading="" ui-sref="">
    <div ui-view=""></div>
</tab>

I only get a different styling on the tabs, but not a change in their position.

Any help will be appreciated.

Community
  • 1
  • 1
ackzell
  • 277
  • 1
  • 3
  • 15

2 Answers2

1

So, I came across this way to override templates in Angular Bootstrap UI:

Can you override specific templates in AngularUI Bootstrap?

And changed the order in the markup (note that the ul comes after the .tab-content in this template):

<script id="template/tabs/tabset.html" type="text/ng-template">
  <div> 
      <div class="tab-content"> 
        <div class="tab-pane"  
             ng-repeat="tab in tabs"  
             ng-class="{active: tab.active}" 
             tab-content-transclude="tab"> 
        </div>
      </div>

      <ul class="nav nav-{{type || 'tabs'}}" 
          ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" 
          ng-transclude></ul> 


    </div>
</script>

That did it.

Community
  • 1
  • 1
ackzell
  • 277
  • 1
  • 3
  • 15
0

The following template should work with the latest 2.3.1 version:

<script id="uib/template/tabs/tabset.html" type="text/ng-template">
    <div>
        <div class="tab-content">
            <div class="tab-pane" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"></div>
        </div>
        <ul class="nav nav-{{tabset.type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
    </div>
</script>
chy600
  • 175
  • 3
  • 8
  • It would be best if you included an explanation with your answer to help readers understand why it works. – Barker Dec 22 '16 at 21:27