Menu
I've had some success with the Ionic framework but I've hit a problem with header/footer formatting in a tabbed view. Specifically i need to render more than single line in the header or footer - i really need to put a slide in there and some text. What i've found is that instead of the header/footer being a dynamic size based on the contained content, I've found the space allocated for each appears to be fixed. Using this excerpt of the tab view, I see both the header and footer content being truncated:
<ion-view title="Bug tab">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Header!</h1>
<h2>more header</h2>
<h2>more header</h2>
</ion-header-bar>
<ion-content has-header="true">
<h2>Content<h2>
</ion-content>
<ion-footer-bar class="bar-subfooter" class="bar-assertive">
<h1 class="title">Subfooter</h1>
<h2>more subfooter</h2>
<h2>more subfooter</h2>
</ion-footer-bar>
<ion-footer-bar align-title="left" class="bar-assertive">
<h1 class="title">Footer</h1>
<h2>more footer</h2>
<h2>more footer</h2>
</ion-footer-bar>
</ion-view>Is there a way around this problem? Is there way to get a fixed but dynamically sized header/footer region and have the rest of the content in the middle scrollable?
(I'd ask on the ionic framework but the website rejects my login with 'unknown error' consistently.
602
Height of header/footer is set by ionic CSS on .bar and .bar-footer classes, respectively.
What you can do is:
a) Override the .bar CSS class setting the desired height:
.bar{height: 80px; }b) Use inline styles, to set the height there:
<ion-header-bar align-title="left" class="bar-positive" style="height: 80px;">Anyway, I think that both options (fixed heights) are the right way, because otherwise you won't be able to position correctly the content, or the subfooter.
Here there's a code snippet with fixed heights (pay attention on "top" and "bottom" CSS properties, to match new bar heights).
angular.module('starter', ['ionic']).bar{
height: 80px !important;
}
.has-header{
top: 80px !important;
bottom: 160px !important;
}
.bar-footer{
height: 100px !important;
}
.bar-subfooter{
bottom: 100px !important;
height: 60px !important;
}<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>
<body ng-app="starter">
<ion-view title="Bug tab">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Header!</h1>
<h2>more header</h2>
<h2>more header</h2>
</ion-header-bar>
<ion-content has-header="true">
<h2>Content</h2>
</ion-content>
<ion-footer-bar class="bar-subfooter" class="bar-assertive">
<h1 class="title">Subfooter</h1>
<h2>more subfooter</h2>
<h2>more subfooter</h2>
</ion-footer-bar>
<ion-footer-bar align-title="left" class="bar-assertive">
<h1 class="title">Footer</h1>
<h2>more footer</h2>
<h2>more footer</h2>
</ion-footer-bar>
</ion-view>
</body>If you want the height to expand based on the content dynamically, you can use the min-content height property, although in that case, as you won't know in prior the heights of header, footer and subfooter, you won't be able to set the proper top/bottom CSS on the position absolute divs that require it (content and subfooter), so part of those divs will remain hidden by the header and footer elements.
Check the difference in the following snippet:
angular.module('starter', ['ionic']).bar{
height: -moz-min-content !important;
height: -webkit-min-content !important;
height: min-content !important;
}<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>
<body ng-app="starter">
<ion-view title="Bug tab">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Header!</h1>
<h2>more header</h2>
<h2>more header</h2>
</ion-header-bar>
<ion-content has-header="true">
<h2>Content</h2>
</ion-content>
<ion-footer-bar class="bar-subfooter" class="bar-assertive">
<h1 class="title">Subfooter</h1>
<h2>more subfooter</h2>
<h2>more subfooter</h2>
</ion-footer-bar>
<ion-footer-bar align-title="left" class="bar-assertive">
<h1 class="title">Footer</h1>
<h2>more footer</h2>
<h2>more footer</h2>
</ion-footer-bar>
</ion-view>
</body>I'm very late to this discussion, but I was able to use height: auto on my ion-footer-bar to flex to any height, based on the content. Hope this helps someone.
HTML:
<ion-footer-bar keyboard-attach class="item-input-inset bar-detail dynamic-height" ...
CSS:
.dynamic-height {
height: auto;
}
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
