Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling Disabled Toggle #215

Open
EddyCwdry opened this issue Aug 29, 2019 · 3 comments
Open

Styling Disabled Toggle #215

EddyCwdry opened this issue Aug 29, 2019 · 3 comments

Comments

@EddyCwdry
Copy link

Is there a way to style the disabled toggle controls? There seems to be only options to set the default styling, and I haven't been able to find a way to target the .toggle:disabled div to find the child controls to style, as the disabled state is rendered to the div, and as far as I can tell you can't select disabled divs as :disabled only applies to form controls.

@ghost
Copy link

ghost commented Dec 12, 2019

You can add field 'data-offstyle' to your input as shown below :

<input id="toggle" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-on="Enabled" data-off="Disabled">

@EddyCwdry
Copy link
Author

EddyCwdry commented Dec 12, 2019

This doesn't work, i'm not trying to style it's on/off states, i'm talking about applying a style when the control itself is set to disabled by calling $('#MyToggle').bootstrapToggle('disable'); this adds a disabled="disabled" tag to the toggle div but as I said a disabled <div> isn't a valid css target so you can't style it as you would other controls.

At the moment i'm having to manually swap classes to ensure there's some reflection of the control's disabled state but it would be preferable to not have to do this as if there's a simpler solution.

@Fulmetal
Copy link

Fulmetal commented Apr 20, 2020

kia ora. i think we were having the same issues. i was annoyed that the cursor did not change to not-allowed. in the mean time i added a bit of css to my site to get the desired effect

div.toggle.disabled > div.toggle-group > span, div.toggle.disabled > div.toggle-group > label { cursor: not-allowed !important; }

esentially any label or span with a div parent that has a toggle-group class that has a div parent that has the toggle and disabled class will have cursor:not-allowed style applied.

the !important is there due to the fact that i spent 2 hours trying to figure out if its a bug or if im doing something wrong :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants