Angular UI Bootstrap tabs below

Question

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 · Accepted Answer · 2017-05-23 11:53:43Z

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.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jul 20, 2015 at 19:42

ackzell

2871 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chy600 · Accepted Answer · 2016-12-22 21:05:19Z

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>

answered Dec 22, 2016 at 21:05

chy600

1753 silver badges8 bronze badges

1 Comment

Barker Over a year ago

It would be best if you included an explanation with your answer to help readers understand why it works.

Collectives™ on Stack Overflow

Angular UI Bootstrap tabs below

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related