My code was...

<div class="row">
  <label>Living?</label>
  <div class="toggle" role="toggle" onclick="" toggled="">
    <input type="hidden" name="value" value="true">
    <span class="thumb"></span>
  </div>
</div>

...when it should be something like this...

<div class="row">
  <div class="toggle" role="toggle">
    <input type="checkbox" name="mytoggle" id="mytoggle" value="true">
    <span class="thumb" data-on="ON" data-off="OFF"></span>
  </div>
  <label for="mytoggle">Living?</label>
</div>

Thanks again, Remi!


2018-03-18 0:48 GMT+02:00 Remi Grumeau <remi.grum...@gmail.com>:

> Two errors in fact :)
> - Input should be a checkbox, not hidden. Otherwise, browser cannot toggle
> its value.
> - you must set an "id" attribute on the input + a "for" attribute on the
> label, so wihen you click on the label, it toggle the input value. Label
> goes 100% width, on top of the toggle.
>
> See this pen https://codepen.io/remi-grumeau/pen/dmpLvX?editors=1000
> I added a green color on the label so you see how it covers the whole area.
>
>
> - bonus point : label should be after the div, not before it. can't
> remember exactly why but there is a CSS selector reason for that.
>
> Cheers,
> Remi
>
>
> Remi
>
> On Sat, Mar 17, 2018 at 12:33 PM, Rune Back <rune.b...@gmail.com> wrote:
>
>> <!-- It looks OK, but it's *R/O*! -->
>> <div class="row">
>>   <label>Living?</label>
>>   <div class="toggle" role="toggle" onclick="" toggled="">
>>     <input type="hidden" name="value" value="true">
>>     <span class="thumb"></span>
>>   </div>
>> </div>
>>
>> Thankful for any help,
>>
>> Rune
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "iPhoneWebDev" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to iphonewebdev+unsubscr...@googlegroups.com.
>> To post to this group, send email to iphonewebdev@googlegroups.com.
>> Visit this group at https://groups.google.com/group/iphonewebdev.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
> --
> You received this message because you are subscribed to the Google Groups
> "iPhoneWebDev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to iphonewebdev+unsubscr...@googlegroups.com.
> To post to this group, send email to iphonewebdev@googlegroups.com.
> Visit this group at https://groups.google.com/group/iphonewebdev.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
You received this message because you are subscribed to the Google Groups 
"iPhoneWebDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to iphonewebdev+unsubscr...@googlegroups.com.
To post to this group, send email to iphonewebdev@googlegroups.com.
Visit this group at https://groups.google.com/group/iphonewebdev.
For more options, visit https://groups.google.com/d/optout.

Reply via email to