ons-col

OnsenUI

Represents a column in the grid system. Use with ons-row to layout components.

Click here to see the original article

claudioc

@OnsenUI I am using ons-row and ons-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.

munsterlander

@claudioc Why not just use: style="padding-left:16px;" for the second col and get rid of the middle one?

claudioc

@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!

munsterlander

@claudioc No problem! If you read through my post history, you will see where I forget stuff all the time too!

ons-col browsing