1

I want my mobile app (using Ionic Framework) to have 3 sections: a header, a middle and the bottom. The middle and bottom should fill up all the remaining space: middle 80% and bottom 20%.

In the middle section, there should be an 80x80 image centered both horizontally and vertically. This should also be the case for the bottom section.

I've tried many different approaches, but none of them seem to do the job. Some do work in plain html/css, but when I put it in <div ng-controller="SomeCtrl"> or <ion-content>, it stops working.

For the middle section, I'm now using something like:

    html, body {height:100%;}
    .flex-container {
        display: -webkit-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
        height: 100%;
        background: yellow;
    }

<ion-view view-title="Landing">
    <div class="flex-container">
        <div ng-controller="SomeCtrl">
        <img src="../img/myimg.png" /><br /><br />
            </div>
    </div>

The image is positioned vertically, but not horizontally. As I said, this does work in plain html/css, but not when I include it in my Ionic project.

Anyone who can help me with this? Searched and demo-ed for hours now but can't seem to wrap my head around it.

binoculars
  • 2,226
  • 5
  • 33
  • 61
  • 1
    Can you create a demo of it using play.ionic.io ? – m4n0 Sep 20 '15 at 18:17
  • Trying to do the same here. Shame no-one can answer this. It's a pretty basic design pattern. I am going to be stripping the page down to bare bones, then building back up again. This is useful http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space – Nick T Dec 31 '15 at 15:28

0 Answers0