Rows inside a footer

1

I tried the following code:

<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
    <div class="bar bar-footer">
        <div class="row">
            <div class="col">.col1</div>
            <div class="col">.col2</div>
            <div class="col">.col3</div>
            <div class="col">.col4</div>
        </div>
        <hr/>
        <div class="row">
            <div class="col">.col5</div>
            <div class="col">.col6</div>
            <div class="col">.col7</div>
            <div class="col">.col8</div>
        </div>
    </div>
</ion-view>

And what happens is that the two rows get side by side…
Any suggestion about how to have two lines with 4 columns in the footer?

2

One Question, why are you mixing ionic javascript and css components?
Use ion-footer tag to create your footer.

Maybe it is caused because footer, header, subheader have fixed heights.
If the height is not fixed it is difficult to calculate ion-content scrolling height.

You could inspect your view with chrome developer tools oder firebug in firefox if there are some style attributes (floatings for divs with class row in the footer bar) that could cause this issue.

3

Well, like @bengtler said, I was messing up a little the things. And here’s why I failed and how to succeed on this:

  1. Use ion-footer for properly render the footer of your app.

  2. The real deal is that ion-footer and ion-header are special elements separated from ion-content. The ion-content has some css properties: position: absolute; top: {header height}; bottom: {footer height}. The ion-footer and ion-header are elements with specific height, so, it will not stretch based on your contents. If you need something like what I needed, use CSS to change the height of the ion-footer and the css property bottom of ion-content.

Hope it helps everyone,
Regards, Sid