All geek questions in one place

How to get dynamic-size headers / footers in ionic form?

I had some success with the Ionic framework, but I ran into the problem of formatting the header / footer as tabs. In particular, I need to display more than one line in the header or footer - I really need to put the slide there and the text. I found that instead of the header / footer being a dynamic size based on the content contained, I found that the space allocated for each seems to be fixed. Using this excerpt in tab form, I see how the contents of the header and footer are 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 any way to solve this problem? Is there a way to get a fixed but dynamically sized header / footer area, and the rest of the content in the middle scrollable?

(I would ask about the ionic structure, but the website is constantly changing login with an “unknown error”.

+5
source share
2 answers

The height of the header / footer is set using ionic CSS to the classes .bar and .bar-footer respectively.

What can you do:

a) Override the .bar CSS class to specify the required height:

 .bar{height: 80px; }

b) Use the built-in styles to set the height there:

 <ion-header-bar align-title="left" class="bar-positive" style="height: 80px;">

In any case, I think that both options (fixed heights) are the right way, because otherwise you will not be able to correctly position the content or the stand.

There is a snippet of code with fixed heights (note the properties of the “top” and “bottom” CSS to match the new column 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 dynamic content , you can use the min-content height property, although in this case, since you won’t know before the tops of the header, footer and subclass, you won’t be able to set the correct CSS header / footer to the position of the absolute divs that require it (content and subtitle), so some of these 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>
+2
source

I'm very late to this discussion, but I was able to use height: auto at my ion-lower level to bend 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; }
+2
source

Source: https://habr.com/ru/post/1205841/

More articles:


All Articles