Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.


  • Onsen UI

    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 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 width="16px"></ons-col>
       <ons-col class="addr-city">
           <ons-input modifier="material" float placeholder="City"></ons-input>

    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: