ons-col
-
Represents a column in the grid system. Use with ons-row to layout components.
Click here to see the original article
-
@OnsenUI I am using
ons-row
andons-col
to distribute input elements in a form. In the case where I need two inputs on the same row, those inputs need to be spaced. To accomplish that using only structural element (which act as my layout elements) I did this:<ons-col class="addr-zip" width="33%"> <ons-input modifier="material" float placeholder="ZIP Code"></ons-input> </ons-col> <ons-col width="16px"></ons-col> <ons-col class="addr-city"> <ons-input modifier="material" float placeholder="City"></ons-input> </ons-col>
that is a placed an empty
ons-col
element between the two. I am almost happy with the solution (everything works perfectly thanks to the onsenui “layout engine” and no exception are added in the CSS), but I wonder if there is a better solution which doesn’t involve an additional element and/or hacking the CSS.
-
@claudioc Why not just use:
style="padding-left:16px;"
for the second col and get rid of the middle one?
-
@munsterlander yeah, it actually works very well :D
I really overthought this one, because I was thinking in term of “layout” more than “position adjustments”, if you know what I mean.
Thank you for your time!
-
@claudioc No problem! If you read through my post history, you will see where I forget stuff all the time too! :grinning: