CODEWITHSUNDEEP
cssangularjsangular-ui-bootstrapangular-ui-bootstrap-tab
Jule Slootbeek
Jule Slootbeek

Reputation: 323

UI Bootstrap adds <div> around <uib-tabset> directive, breaking CSS

When using <uib-tabset> included in UI Bootstrap, the directive template surrounds the resulting unordered list with an empty <div> element.

<div>
  <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
  <div class="tab-content">
    <div class="tab-pane" 
         ng-repeat="tab in tabs" 
         ng-class="{active: tab.active}"
         uib-tab-content-transclude="tab">
    </div>
  </div>
</div>

This is causing my CSS to break since the CSS selectors are as follows.

.tabbable-custom > .nav-tabs > li.active {
    ...
}

When I use <uib-tabset>, this rule isn't picked up because the hierarchy is now

.tabbable-custom > div > .nav-tabs > li.active {
    ...
}

Can I avoid having to overwrite my entire CSS library to account for this added <div>?

Update:

Here is the html from my template:

<div class="portlet-body">
    <div class="tabbable-custom">
        <uib-tabset>
            <uib-tab ng-repeat="tabData in tabDataArray" heading="{{ tabData.heading }}">

and here is the resulting DOM:

<div class="portlet-body">
    <div class="tabbable-custom">
        <div class="ng-isolate-scope">
            <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">

I can remove the class="ng-isolate-scope" by disabling debugInfo, but it doesn't make a difference with the CSS.

Update 2: Another solution could be to remove the <div class="tabbable-custom"> from my template HTML, and add that class to the empty <div> that the <uib-tabset> directive places. Is this a possibility with UI Bootstrap?

Upvotes: 1

Views: 4570

Answers (2)

mehrdad kahe
mehrdad kahe

Reputation: 11

I met the same problem when I using odetocode Example, that implements tabset with angular-ui router. and in the DOM exactly added a DIV with "ng-isolate-scope" class. I tried to override this block that achieved from ui-bootstrap-tpl.js by removing additional created div, and finally It Works.

angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tabs/tabset.html",
    "<div>\n" +
    "  <ul class=\"nav nav-{{type || 'tabs'}}\" ng-class=\"{'nav-stacked': vertical, 'nav-justified': justified}\" ng-transclude></ul>\n" +
    "  <div class=\"tab-content\">\n" +
    "    <div class=\"tab-pane\" \n" +
    "         ng-repeat=\"tab in tabs\" \n" +
    "         ng-class=\"{active: tab.active}\"\n" +
    "         uib-tab-content-transclude=\"tab\">\n" +
    "    </div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}]);

There's another approach. You can also override the CSS Styles by changing related styles to this format:

.tabbable-custom > .ng-isolate-scope > .nav-tabs

the second approach may be seems boring. But you're sure that tabset template remains intact and does not occur conflicts with other tabset pages.

Upvotes: 0

Jule Slootbeek
Jule Slootbeek

Reputation: 323

Managed to accomplish what I needed by overwriting the UI Bootstrap template as explained in this question: Can you override specific templates in AngularUI Bootstrap?

Upvotes: 1

Related Questions