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-colto 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-colelement 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
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!