Customising a checkbox Switch using Init Script

johntalbott

@[deleted] - after re-reading your CSS code, I believe you are not seeing the issue I'm referring to because .km-switch is not wrapped by #myswitch1_w.

#myswitch1_w.km-checkbox - doesn't reference anything that I can tell. .km-checkbox is not used with a Kendo switch.

The only selector being used is .km-switch. #myswitch1_w isn't coming into play due to the ",".

Can you drop another switch on your form and see if also picks up the width of 17.1rem?

Rennur wrote

/* Switch ID specific styling - note that Aware IM appends _w to the end of your ID */
/* Width of the switch widget */
#myswitch1_w .km-checkbox, .km-switch {
	width: 17.1rem !important; /* 11.1em for Yes/No - 17.1em for Authorised/Unauthorised */
	background-color: #bababa !important; 
	cursor: pointer;
}

Rennur

johntalbott wrote
@[deleted] - after re-reading your CSS code, I believe you are not seeing the issue I'm referring to because .km-switch is not wrapped by #myswitch1_w.

#myswitch1_w.km-checkbox - doesn't reference anything that I can tell. .km-checkbox is not used with a Kendo switch.

The only selector being used is .km-switch. #myswitch1_w isn't coming into play due to the ",".

Can you drop another switch on your form and see if also picks up the width of 17.1rem?

Yes thanks John, you are correct. All switches are resized.
The 'handle' css needs to be styled as well - beyond my css capability.

johntalbott

This has turned into a personal Rubiks cube. This dojo demonstrates the problem I described.

https://dojo.telerik.com/@johntalbott/iJicefiT

This is the CSS in question ...

/*THIS WORKS*/    

/*.switch2-container > .k-switch {
	width    : 130px;
}*/
 
/*THIS DOES NOT WORK*/    

#switch2_w.k-switch {
	width    : 130px;
}

@[deleted] or anyone else ... do you see why the version using the #switch2_w isn't working?

« Previous Page