Checkbox CSS



  • Hey,

    I’am using the beta6 and try create a view with checkboxes looking like this:

    0_1453988214579_Bildschirmfoto 2016-01-28 um 14.35.02.png

    My checkboxes look like this:
    0_1453988710150_Bildschirmfoto 2016-01-28 um 14.44.21.png

    So it seems the css is missing.
    In the example,
    https://onsen.io/pattern-checkbox_list.html

    it seems there is no special CSS needed.
    0_1453988318698_Bildschirmfoto 2016-01-28 um 14.38.06.png

    So I don’t know why it is not working.

    My Code:

    ....
    <ons-list>
       <ons-list-header>Title</ons-list-header>
       <ons-list-item modifier="tappable">
       <label class="checkbox checkbox--list-item">
          <input type="checkbox" checked="checked">
          <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
          Checkbox 1
        </label>
      </ons-list-item>
    .....
    

    Thank you in advance



  • You are using the reference of onsen1.0 not onsen2.0, please have a look at this url: https://onsen.io/2/index.html

    <ons-list>
       <ons-list-item>
           <label class="checkbox--noborder">
           <input type="checkbox" class="checkbox__input checkbox--noborder__input">
               <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
             OFF
           </label>
        </ons-list-item>
    <ons-list-item>
      <label class="checkbox--noborder">
        <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
          <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
          ON
      </label>
    </ons-list-item>
    <ons-list-item>
      <label class="checkbox--noborder">
        <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
        <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
          Disabled
        </label>
      </ons-list-item>
    </ons-list>
    

    I also did a Codepen-Link: http://codepen.io/anon/pen/eJKXYX



  • @patrick Thank you!


Log in to reply