CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrap
Dev java
Dev java

Reputation: 111

tabs full height in bootstrap

Based on an example here I am trying to put tabs in panel body with a full size like the example that worked very well, but in my case I still have no full height tab content. Can someone explain to me what is the problem?

Above the code : the example.js file is the same in the example 

<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
      html, body, .tabset, .tab-content, .tab-pane, .tabbable {
       height:100%;
      }

     .panel-body .tab-content {
        height:100%;
        min-height:100%;
        background:green;
      }
      .panel-body {
      height:100%;
      min-height:100%;
      }

      .panel{
      height:100%;
      min-height:100%;

      }
    </style>
  </head>
  <body>
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title"> Example

    </h4>
  </div>
  <div class="panel-wrapper collapse in">
    <div class="panel-body" ng-controller="TabsDemoCtrl"> 
  <tabset>
    <tab heading="Static title">
        Static content
    </tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        {{tab.content}}
    </tab>
  </tabset>
  </div>
  </div>
  </div>
  </body>
</html>

Upvotes: 3

Views: 11481

Answers (2)

Code Warrior
Code Warrior

Reputation: 438

you forget to add panel

just wrap tabset inside div with panel class like this

<div class="panel panel-default">
<tabset>
    <tab heading="Static title">
        Static content
    </tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        {{tab.content}}
    </tab>
  </tabset>
</div>

height will be as you desired

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You need to add height for the intermediary element panel-wrapper which doesn't have specified an height component, height: inherit will inherit height from the parent element .panel which would be 100% and then the panel-body class can utilize get that height.

.panel-wrapper{
    height: inherit;
}

Working Plunkr

Upvotes: 2

Related Questions