Switch - trouble

User 122279 Photo


Senior Advisor
13,085 posts

I'm trying to build this Foundation switch in SD: https://get.foundation/sites/docs/switch.html , the 'basic' one. Attached is my n'th attempt. The look of it is fine, but it doesn't work. If you take a look at the source code, instead of what I would like it to be:
<div class="switch">
<input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">Download Kittens</span>
</label>
</div>

(not that I want to download any kittens, it's just what it says in the example)

I get:
<div class="container switch"><label class="checkbox switch-input" id="exampleSwitch"><input type="checkbox" name="exampleSwitch" value=""><span>Lorem ipsum dolor</span></label><label class="label switch-paddle" for="exampleSwitch">Label</label></div>


Note that instead of 'input class' I get 'label class', so it seems like I have two labels. Don't know if that might be the culprit or not. Also, I don't know how to add that span class for the screen reader text, unless I add it to the source code after export.

I must be doing something wrong, or there is something I'm overlooking, but I've tried all I can think of. The three switch classes I've used are listed among the Foundation classes in the app, so somehow it should be possible to create a working switch. Has any of you done it and succeeded? Got some good ideas for me?
Attachments:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2885740 Photo


Registered User
30 posts

SD4 puts the input checkbox inside a label. Because of that the input did not get an id, nor the class switch-input
The label (with the for-property) you added is ignored.
Seems to me you can only get it right by manual correcting the html file
This works:
<div class="container switch">
<input type="checkbox" class="switch-input" name="exampleSwitch" value="" id="exampleSwitch"><span>Lorem ipsum dolor</span>
<label class="label switch-paddle" for="exampleSwitch">Label</label>
</div>

René
User 187934 Photo


Senior Advisor
19,126 posts
Online Now

Yes pasting the html from foundation into an html element and it works. They should give us access to building complete element trees .
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
13,085 posts

Thanks for your replies, guys. They confirmed some of my thoughts. I have now also been in touch with the developer, who said, that at the time of creating the form options ('checkbox' being one of them), the intention was to make it easy to use the input options in forms, they didn't think of any other usage. This might be changed, but there is no saying when.

I knew about the option of sticking the whole code bit into a html element, but for my purpose right now, that is not good enough. I have to find some other way.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 187934 Photo


Senior Advisor
19,126 posts
Online Now

Give this a try.;)
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
13,085 posts

A very good idea, Eric! Thanks, that got me a bit further. I had also thought that some bit of js would help, but the difference between you and me is that you can actually do it, I can just think about it :lol:

I wrote some options for switched on and off, and I was able to get them displaying vertically centered, but I can't use flex to get the two words a bit further apart from each other.Got some ideas for that?
Attachments:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 187934 Photo


Senior Advisor
19,126 posts
Online Now

Try this.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 122279 Photo


Senior Advisor
13,085 posts

Thanks again, Eric! Great solution!
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 187934 Photo


Senior Advisor
19,126 posts
Online Now

Your welcome.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.