I have the following markup, which should result in the input being stacked above the row of icons. Alas, they each take up half the width of the footer. I've spent way too much time trying to find the culprit CSS related to the footer, but have come up short.
<div class="bar bar-footer bar-balanced auto-height">
<div class="row">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" />
</label>
</div>
</div>
<div class="row">
<div class="col text-center">
<button class="button button-icon icon ion-social-twitter"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-facebook"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-linkedin-outline"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-googleplus"></button>
</div>
</div>
</div>
I'd be interested in either a fix for what appears to be a bug in Ionic's grid, or an override solution to make the rows behave. Thanks a bunch.
Separate the input's div and the buttons' div, then give the input's div the class bar-subfooter instead of bar-footer, and give the buttons' div the classes bar bar-footer:
<div class="bar bar-subfooter bar-balanced auto-height">
<div class="row">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" />
</label>
</div>
</div>
</div>
<div class="bar bar-footer row">
<div class="col text-center">
<button class="button button-icon icon ion-social-twitter"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-facebook"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-linkedin-outline"></button>
</div>
<div class="col text-center">
<button class="button button-icon icon ion-social-googleplus"></button>
</div>
</div>