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.