What's wrong with this code?

21 views
Skip to first unread message

Rune Back

unread,
Mar 17, 2018, 7:33:52 AM3/17/18
to iphone...@googlegroups.com
<!-- 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

unread,
Mar 17, 2018, 11:33:53 AM3/17/18
to Rune Back, iphone...@googlegroups.com
“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

unread,
Mar 17, 2018, 1:07:22 PM3/17/18
to iphone...@googlegroups.com, Rune Back
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

unread,
Mar 17, 2018, 6:48:28 PM3/17/18
to iphonewebdev
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.

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

unread,
Mar 19, 2018, 2:44:30 AM3/19/18
to iphone...@googlegroups.com
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

unread,
Mar 19, 2018, 2:59:35 AM3/19/18
to iphone...@googlegroups.com
You can change « for » & « id » value by whatever you want btw :)

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

linedi...@gmail.com

unread,
Mar 19, 2018, 7:52:53 PM3/19/18
to iphone...@googlegroups.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

unread,
Mar 19, 2018, 8:00:14 PM3/19/18
to iphone...@googlegroups.com
section .row > input[type=radio] + label, 
section .row > input[type=checkbox] + label,
section .row > .toggle + label {
    width:              100%;
    max-width:          100%;
}


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) 

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.
Reply all
Reply to author
Forward
0 new messages