Vertically Align rows with Ionic

ionic-v1
1

I am trying to vertical align a slider usign this http://ionicframework.com/docs/components/#grid-vertically-align, but the class row row-bottom is align it to the bottom of the scroll div. I want it at the bottom of my screen. Actually what I’m trying to do is fill the hole screen with the 4 buttons and the slider, but for now if I can put the slider at the bottom is fine.

Here are some screenshots of what is going on:

And here is a pen: http://codepen.io/matiastucci/pen/KCeho

Thanks!

2

Css flexbox to the rescue.

.scroll-content{
  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
3

Thanks for the reply!

In a big screen it looks awesome, but if I resize the window or view it on a cellphone it looks like this:

How can I fill (responsively) the screen with those elements?

Thanks!

4

Hmm, I’m having a tough time getting it to fill and retain that 2x2 layout for the buttons. Might I suggest taking advantage of the responsive breakpoints?

It will have the 2x2 layout on big screens, then stack the buttons on smaller screens.

5

Unfortunately this 2x2 is a design I have to make for a client, and he wants this. For a personal app I have no problem doing that. Nevermind, thanks for your time! I really appreciate it.

6

best of luck to you. If you need any reference with flex box, take a look at this site

the-echoplex.net/flexyboxes/

7

Perfect, I am going to check it out. Thanks.