Menu
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>
474
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
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
