section .row > input[type=radio] + label,
section .row > input[type=checkbox] + label,
section .row > .toggle + label {
width: 100%;
max-width: 100%;
}
https://github.com/EmyLibrary/emy/blob/cbf65d893925ebec7b2bb3325c6c3190adc2bc60/emy/themes/emy/main.css#L362
parentEl > el1 + el2 means el2 must be the direct next sibling of el1 inside
parentEl.
CSS is for cascading stylesheet so no selector can exists going backward in the
DOM tree.
Must be a following element.
If not following, label behave like when it’s on top of a text element, aka 30%
max.
So it doesn’tt cover the complete row, and only the label element width toggles
the checkbox, not the full row width (incl. the toggle element width)
https://github.com/EmyLibrary/emy/blob/cbf65d893925ebec7b2bb3325c6c3190adc2bc60/emy/themes/emy/main.css#L279
So yeah, definitely better to put it after.
Cheers,
Remi
> Le 19 mars 2018 à 22:20, [email protected] a écrit :
>
> 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 <[email protected]
> <mailto:[email protected]>> wrote:
> You can change « for » & « id » value by whatever you want btw :)
>
> https://www.w3schools.com/tags/att_label_for.asp
> <https://www.w3schools.com/tags/att_label_for.asp>
>
> Remi GRUMEAU
> 06.63.68.72.06
> https://remi-grumeau.com <https://remi-grumeau.com/>
>
> Le 19 mars 2018 à 07:44, Rune Back <[email protected]
> <mailto:[email protected]>> 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 <[email protected]
>> <mailto:[email protected]>>:
>> 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
>> <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 <[email protected]
>> <mailto:[email protected]>> 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 [email protected]
>> <mailto:[email protected]>.
>> To post to this group, send email to [email protected]
>> <mailto:[email protected]>.
>> Visit this group at https://groups.google.com/group/iphonewebdev
>> <https://groups.google.com/group/iphonewebdev>.
>> For more options, visit https://groups.google.com/d/optout
>> <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 [email protected]
>> <mailto:[email protected]>.
>> To post to this group, send email to [email protected]
>> <mailto:[email protected]>.
>> Visit this group at https://groups.google.com/group/iphonewebdev
>> <https://groups.google.com/group/iphonewebdev>.
>> For more options, visit https://groups.google.com/d/optout
>> <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 [email protected]
>> <mailto:[email protected]>.
>> To post to this group, send email to [email protected]
>> <mailto:[email protected]>.
>> Visit this group at https://groups.google.com/group/iphonewebdev
>> <https://groups.google.com/group/iphonewebdev>.
>> For more options, visit https://groups.google.com/d/optout
>> <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 [email protected]
> <mailto:[email protected]>.
> To post to this group, send email to [email protected]
> <mailto:[email protected]>.
> Visit this group at https://groups.google.com/group/iphonewebdev
> <https://groups.google.com/group/iphonewebdev>.
> For more options, visit https://groups.google.com/d/optout
> <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 [email protected]
> <mailto:[email protected]>.
> To post to this group, send email to [email protected]
> <mailto:[email protected]>.
> Visit this group at https://groups.google.com/group/iphonewebdev
> <https://groups.google.com/group/iphonewebdev>.
> For more options, visit https://groups.google.com/d/optout
> <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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/iphonewebdev.
For more options, visit https://groups.google.com/d/optout.
