How to create two rows in bar-subheader?

ionic-v1
1

Hello,

I try to design sub-header where first row is fixed (some input field) and second row will be created dynamically according to conditions.

so based on COMPONENTS tutorial I created:

 <div class="row">  
   </div>

   <div class="row">  
   </div>

But I get two columns.

Do I need to write custom style or Ionic has proper class.

Sounds like bar-subheader is forced to be with one row only.

Thanks,

2

Solution (at list seems for me):

Just create two subheaders:

<div class="bar bar-subheader item-input-inset" > 111 </div>
<div class="bar bar-subheader item-input-inset" > 222 </div>
3

Bump. Solution above doesn’t fits me (I am using background gradients).

4

You can try using custom css. Add following in your style.css and in your div use subheader2 class. Please note each row height is 44px. So you can multiply with number of rows in your custom css.

.bar-subheader2 {
top: 44px;
display: block;
height: 88px; }

// use above css in div

5

You could use a tabs section at the top and a button bar below that. As each tab has its own view section, they can have their individual button bars. Uploaded a screenshot as an example.

image
checklabs_screen_navbar.jpg720×314 25.7 KB

However, I am considering refactoring it as it occupies significant screen space at the top. The other issue is the tabbed bar will move to the bottom in the ios app and the bar-button will stay put at the top. I am not sure that’s a good idea.

6

Setting ion-footer-bar to have display: block; let me have multiple rows.

7

Hi orthodoc,

I stumbled upon this image while looking for a solution to my problem. I have a header bar then the tabs below it and in one of the tabs I again want a header row with title and buttons. Below that I have ion-content where the content is scroll-able. I can get header and tabs fixed(non scrollable) but struggling with getting another fixed row under tab.

Is your button bar under tab fixed? If so can you please share how you achieved it?

Thanks in advance!