ons-col


  • 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>
       <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:


Log in to reply