Layout with ons-col and ons-row

[gentle ben]

Hi everyone. Please be gentle, I am an onsen/phonegap beginner.

I would like to align some text to the bottom centre of the page. I assume this is possible with CSS, but if I can get the same result with ons-row and ons-col, that would be even better. Is this possible?

[IliaSky]

@gentle-ben ons-row and ons-col are useful mostly when you want a table-like layout.

If you would like to have just some text at the bottom like copyrights or something small I would suggest trying out the ons-bottom-toolbar component - it does exactly that (docs). You may need to add some css like

ons-bottom-toolbar { text-align: center; }

but that’s pretty much it. Here’s a demo.

You can probably get a similar result if you specify the row heights or something similar, but I think the bottom toolbar is much simpler.

[munsterlander]

@IliaSky Great reminder for another awesome feature of Onsen! I was using the following CSS:

#footer {
           position:fixed;
           left:0px;
           bottom:0px;
           height:60px;
           width:100%;
        }

But now have this:

<ons-bottom-toolbar>
   <ons-button onclick="fn.go()" modifier="large" style="background-color:green;height:55px;font-size:35px;">GO!</ons-button>
</ons-bottom-toolbar>

With the CSS, I had issues for text boxes and the keyboard popping up - meaning that the button covered the bottom textboxes where a user could not see them. Now when I use the bottom toolbar, I get this happening ( @Fran-Diox - don’t kill me with the inline CSS, its temporary, I swear! :stuck_out_tongue: ):

Is there a way, to just slide everything up and keep the toolbar at the bottom with padding remaining the same? Basically, keep the page looking like it is supposed too and just slide it all up so the keyboard doesn’t cover anything?

[gentle ben]

Thanks friends for your help! I did end up using css in the end - but it is good to know about that feature