ghinda / css-toggle-switch Goto Github PK

Hi.

Is it possible to have different color of background regarding the selected value?
Would be nice for on/off switches for example :)

If using with bootstrap or foundation, right now it seems like you're limited to using the same text styling regardless of whether an input/label is chosen or not. It looks really nice in the standalone version, and it'd be really nice if the bootstrap/foundation toggle switches could also dynamically change the option's text color if selected.

Hi,
Nice work! But is it possible to extend more than 6 toggle radio ? I think a have to play with part of css where are defined nth child, but not sure if extend will still work.
Thanks

This happens when the user clicks and "drags" the mouse as-if-selecting the text, (and very little movement is needed so not always any selection is created), the Button does not get selected/checked, but the "onclick" is triggered. (tested in Chrome)

We have an OnClick on both labels, with different input param which is used to change the state,
i.e.
Additive

A work-around would have been to check the "checked" state in the onClick, but unfortunately that one have not yet changed at the moment of the click-event.

Expected States

Error State

I am using the radio flavor of your css-toggle-switch. I want to use window.confirm() in order to make sure a user REALLY wants to toggle the radio to ON or OFF.

How do I force the toggle-switch to not toggle if the user clicks Cancel in the Confirm dialog?

I can force my code down the line not to run based off this confirm, however the toggle-switch still appears to toggle.

Will preventDefault() on the click event on the label accomplish this?

Edit: I'm a dope. I wasn't passing the click event to my function properly. ALL IS WELL!

In the last version of bootstrap, if the text is too large, the button keeps its size. Is there anyway that the button can fit the text that have inside responsively? Regards.

Currently the demo doesn't have anything to indicate that the toggle switch currently has keyboard focus. While the demo is great in that it can be used by a keyboard and can register to screenreaders, people who have low vision using a keyboard do not know that the item is actionable.

Hello,

I am trying to using the toggle switch on just two radio inputs and have the selection conditionally show one of two select menus. Since the toggle switch does not change the 'checked' value the css at the bottom of this post is not working. Do you know another way to achieve this?

Here is my test page: http://www.maxms.com/sbu/
(Scroll down just a tad to the "FIND YOUR PROGRAM" area.)

.major:checked ~ .major-menu,
        .career:checked ~ .career-menu
        {
            clip: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            position: static;
            width: auto;
        }

        major:not(:checked) ~ .major-menu,
        .career:not(:checked) ~ .career-menu
         {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

Thank you!

Disable the text selection using somthing like user-select: none.

From documentation is seems implicitly that first switch buttons always corresponds to checkbox off and second button to checkbox on.

I am working on existing UI where some legacy settings are "check to disable". That is checkbox on leads to corresponding setting item getting disabled.

Replacing it with switch already helps a lot since I can provide clear label for states. However it results in some switches having enabled state on the right and some on the left. Also I can't style disabled state separately, since again it can be on the left or right.

Is there a possibility of reversing order of switch buttons for some of switches?

Just tested these on my android (Galaxy S3) default browser, and they don't seem to be working right. I see some flickering with the candy theme, but the other themes don't seem to work at all.

Is this a known issue?

on the demo page, checkboxes have the work "wireless" to the left, which fits easily.

not all words are as short as "wireless", however, and end up overlapping the toggle.

is it possible to adjust the amount of space to the left of the checkbox without breaking the checkbox itself or having the text continuing to overlap the box?

Hi,
I'm implementing this on my project but i have seen that all devices works less android 2.3 default browser. Well, it works "partialy". I can click on the switch but the transition does nothing. Then, if i click on another part of the screen, the transition works. Does anybody knows why this is happening? Here's my code:

.hbs:

<div class="switch">
                {{#isDefault deviceOS}}
                    <label class="switch-light android_switch" onclick="">
                        <input type="checkbox">
                        <span>
                            <span>No</span>
                            <span>Sí</span>
                        </span>

                        <a class="btn btn-primary android_btn"></a>
                    </label>
                {{else}}
                    <input type="checkbox" class="js-switch" id="input-{{ idAttr }}" />
                {{/isDefault }}
            </div>

.css

.switch-light a {
      display: block;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out; }

Thank you!

Another frontend dev on our team added your switch.scss to our phonegap project and then it took us ages to figure out why all of our text was white on android devices. The cause was the following CSS statement, which uses a rather generic classname (for some reason this didn't show up in our Weinre CSS debug console):

.android {color: white;}

I think it would make more sense to either call this .switch-android or require it all to be wrapped in a .switch-plugin etc. Cheers.

readme has jsDelivr install instructions, but neither project page or stylesheet links seem to be working.

Not sure if it was working or just added for future use since there seems to be open PR about it jsdelivr/jsdelivr#8252

Is there a way to remove the padding or margins from the toggle?

The borders were added to see where spacing was coming from.

<!-- Question 1 --> <div class="row row-centered"> <div class="col-lg-3 hidden-xs"></div> <div class="col-lg-3 col-xs-8 text-left" style="line-height:32px; border:1px solid red;">Did you install a ground block?</div> <div class="col-lg-3 col-xs-4 text-right" style="line-height:32px; border:1px solid red;"> <label class="switch-light" onclick="" style="border:1px solid green; margin:0;"/> <input type="checkbox" style="margin:0"> <span class="well"> <span>Off</span> <span>On</span> <a class="btn btn-primary"></a> </span> </label> </div> <div class="col-lg-3 hidden-xs"></div> </div> <!-- / Question 1 -->

Hi Mate,

I'm long time user of your library. I've just updated it, but I have the problem of the label not covering all div and also not centered at the div's height, every content gets alligned to the top. Ive been several hours, and I'm not ablet to solve it with post CSS. Can you give me a hint? Regards:

In this image, unless i click on the text, doesn't select. I want that to happend and also the text being vertically centered.

PD:With the previous version installed ( i recall 3.1.1) didn't happend.

Great plugin. Just what I was looking for. Thanks!

I wondered if you'd any experience with adding images/icons to the labels? I've tried adding an tag inside the labels, and also as a background image as CSS, both to no avail.

When I do so, it's as if the 'slider' bit (the bit that moves left/right, overlaps the image of the selected option.

Hope that makes sense. Any help would be appreciated if you've done this in the past :)

Thanks in advance,
Steve

For the "Light switch" (checkbox version), screen readers read the text "Off On" as part of the label which is not accurate. It should not read "Off On" as part of the label. Tested in VoiceOver and ChromeVox.

Suggestion to fix: add aria-hidden="true" to the container of the "Off On" text.

Unfortunately none of the 3 examples work on the safari browser of an iPad 2 (with iOS 5.0.1). It still looks good, but neither tapping or sliding toggles the buttons.

[edit] Sorry, I've just come accross your post http://ghinda.net/css-toggle-switches/, where you explicitly state that these switches do not work on most mobile browsers atm.

Importing your css in the page cause high cpu usage even on idle.

Configurations tested:
Chromium 25.0.1364.160 Ubuntu 13.04 (25.0.1364.160-0ubuntu3)
Chrome 25 Mac Os X 10.8
Safari 6.0.5 Mac Os X 10.8

How to replicate the bug:

• open a site with css-toggle-switch.css (e.g. http://ghinda.net/css-toggle-switch/)
• open Chrome Task Manager / Activity manager
• you will see a crazy high CPU usage even on idle or when the page is in the background.

Not sure if it's just me but the demo (http://ghinda.net/css-toggle-switch/) doesn't seem to work on touch devices. I have tried an iPhone 4S and an iPad 2 and neither work. Are they working for you?

Thanks!

Hey guys,

I have an issue with minifying the content of the 4.0.2 build using Microsoft's MVC Bundler. Could we provide an already minified file in the distro?

/* Minification failed. Returning unminified contents.
(7845,28): run-time error CSS1019: Unexpected token, found '}'
(7854,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(7855,8): run-time error CSS1035: Expected colon, found '{'
(9829,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9830,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%'
(9854,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(9855,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
 */

would it be possible to allow for multi-select with ctrl-click?

Hi,
I have been running into an issue while trying to get this to work in the Microsoft Edge browser. The switch appears to display correctly, but clicking on it does not seem to trigger any action.

Any ideas about this?

Here is the HTML for the related element:
<label class="switch-light switch-candy" style="width:90px;" onclick=""> <input name="test_switch" type="hidden" value="0"><input style="" type="checkbox" value="1" name="test_switch" id="test_switch"> <span> <span>No</span> <span>Yes</span> <a></a> </span> </label>

Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134

This is a fantastic script and I am so glad I found it.

Is it possible to make the toggle switch colour different depending on which radio button is selected.?

Currently all my buttons have a light blue background and the selected colour is dark blue like the examples. However I would like a traffic light style depending on which radio is checked. So if Yes is ticked it goes Green, if you select no it turns to red, and if you select Maybe its orange.

The android toggle switch changes from Grey to Blue, if its on or off, but thats a toggle swtich and I dont seem to have got it working for a multi select switch.

Paul

Is there a way to make switches, specifically the checkbox one, HTML compliant? The problem is with p tags inside label tag?

When the button is short and when the associated text is long, the text overflows outside of the box entirely (very dark in the screenshot).

If the text is customized to be very big:

It would be great to see this as an npm package.

The default focus styles from the browser are generally awful. In the demo, the blue background of the page has a contrast ratio of 1.02:1 to Chrome's default focus ring. Some consider this a WCAG violation, some don't (because it is a browser default). Either way, overriding the browser's default focus styles for something with sufficient contrast and visual appeal is, I think, worth including here.

Since I am not familiar with the project, nor SCSS, I mocked up some styles in regular CSS. I do not know all the color combinations nor customizations that are possible, so I did not initiate a pull request. I am happy to offer more insight if helpful.

The proposed styles:

.switch-light input:focus ~span a, .switch-toggle input:focus + label {
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.5);
    outline: none;
}
.switch-light.switch-material input:focus ~span a {
    box-shadow: none;
    border: 3px solid rgba(0,0,0,.5);
}
.switch-toggle.switch-material input:focus + label {
    box-shadow: none;
    text-decoration: underline;
}

Hi

This is a great resource, thank you for it.

I have some toggles that don't require a legend, so I have made a few changes (only simple ones) to accomodate for that situation. It might be worth including this as an option?

Thanks
Ben

very nice work on this. thanks.
I'm using jquery and am having difficulty getting the selected value.
How would you going about it?

Hi.

I was just trying out your CSS toggle switches, but I found that they don't work very smoothly in Firefox.

The two-state (on/off) buttons are fine, but the "Week / Month / Year" and "Disabled / ADB / DevTools" toggles on the demo page have an issue.

The problem is that when I click on the control to trigger it to toggle, the text jumps a short distance to the left. In the case of "Disabled", it jumps far enough that part of the "D" becomes obscured by the container border. The toggle switches continue to work, but all three (or more) buttons are offset from their intended position, so it doesn't look right.

This issue does not occur in Chrome or IE11.

This error shows up, because bower_components is not included in the component install.

components/ghinda-css-toggle-switch/src/toggle-switch.scss:10: error: file to import not found or unreadable: "../bower_components/bourbon/app/assets/stylesheets/bourbon"

Can we move the scss file and the bower_components files to "files" instead? So if using scss, "styles" can be easily ignored in the build script, and if using css, "files" can be easily ignored.

Were you thinking about adding a :hover and :focus states? It would help a lot for mouse/keyboard users. Maybe a small glow, or a text color/background change, just to emphasize it more. Default outline is ok, but barely visible.
Great work btw. :)

When using css toggle switch together with the bootstrap datepicker, the monthname gets the css-class 'switch' which causes that the datepicker looks awfull.

I'm using the following datepicker:
http://www.eyecon.ro/bootstrap-datepicker/

Example:

Hi!
Would like to know if you are actively maintaining this library

It's worth to spend time on it?

Thanks!

.switch-candy theme is cool, currently i'm using it, but can anybody please "steal" this theme. it can be used only for two state switch :(

completly bad just one example:

<div class="col-md-2">
<label class="switch-light switch-candy" onclick="">
  <input type="checkbox">
  <span>
    Wireless
    <span>Off</span>
    <span>On</span>
  </span>

  <a></a>
</label>
</div>

It seems like the standard for the on/off toggle element is to have the off option on the left side, and the on option on the right.

I'll have to reverse mine, to follow the standard.

Hi!
I'm trying to use your library but I'm encountering this issue: no matter which style I choose, the active options don't show up the active styles. Here is a picture to show the effect:

Did you know why this is happening?
Thanks!

For example, focus indicator on wireless and airplane mode example, couldn't see focus indicator.

On the Android 4.1.2 stock browser, the Boostrap demos (along with the official Foundation switch) don't seem to work at all.

Hi, thanks for all your work on this :)

Is there any way to switch the layout to vertical? (switch moves up and down)

I can't seem to use the keyboard to manipulate the toggle switches on the demo site. The inputs don't seem to be in the tab order, and the only thing hit is the anchor.

Would be great to have a "material" theme:

Happy to submit a PR when I get time if you think it'd be something desirable. Not sure how tri/n-state buttons would work though.

Would it be possible to make this work without ids? I would like to use the widget several times on a page without having any reliable unique ids I could use for the radio buttons. Normally one could wrap the label around the buttons, but so far this doesn't work with the css-toggle-switch.

Currently it is set to 6.25em, is there any way to remove it completely?
Or move it on top like it is on Toggle switch

In my case I need to put the label vertically (above input element), not horizontally like it hard-codded right now.

I gives me overlapping issue when I try to change the title it should be limited to 6.25em for Light switch.