Hey Remil - 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.
I am curious about this, Look new to me... any reference? Thank you On Mon, Mar 19, 2018 at 2:59 AM, Remi Grumeau <remi.grum...@gmail.com> wrote: > You can change « for » & « id » value by whatever you want btw :) > > https://www.w3schools.com/tags/att_label_for.asp > > Remi GRUMEAU > 06.63.68.72.06 > https://remi-grumeau.com > > Le 19 mars 2018 à 07:44, Rune Back <rune.b...@gmail.com> a écrit : > > 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. > > -- > 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. > -- M -- 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.
