April 18, 2014, 3:15am
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:
Css flexbox to the rescue.
April 18, 2014, 3:08pm
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?
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.
April 18, 2014, 4:06pm
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.
best of luck to you. If you need any reference with flex box, take a look at this site
April 18, 2014, 5:53pm
Perfect, I am going to check it out. Thanks.