What's wrong with this code?

[Rune Back]

<!-- 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

[Mogens Beltoft]

“Unexpected end of file?” :)

I can’t see any code.

/Mogens

> On 17 Mar 2018, at 12.33, Rune Back <rune...@gmail.com> wrote:
>

[linedi...@gmail.com]

HI Rune.

what are you try to archive?

There are many errors on that HTML

- missing for attribute

- not sure what you want to archive with the Input

Thank you

--
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+unsubscribe@googlegroups.com.
To post to this group, send email to iphone...@googlegroups.com.
Visit this group at https://groups.google.com/group/iphonewebdev.
For more options, visit https://groups.google.com/d/optout.

--

M

[Remi Grumeau]

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

[Rune Back]

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!

[Remi Grumeau]

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

To unsubscribe from this group and stop receiving emails from it, send an email to iphonewebdev...@googlegroups.com.

[linedi...@gmail.com]

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

M

[Remi Grumeau]

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

To unsubscribe from this group and stop receiving emails from it, send an email to iphonewebdev...@googlegroups.com.