Long custom labels

[Chiefs IT]

Is it possible to have onLabel and offLabel that is longer than three characters?  I'm using the mobile switch on a web page with the silver theme and it appears that if I make the labels more than three characters it bleeds over into the other label.  Try it out yourself click on the "Edit this sample" button here http://demos.telerik.com/kendo-ui/switch/adaptive and change the onLabel or offLabel to "XXXXXXXX" or something long and you will see what I'm talking about.  What I'm trying to accomplish is to get rid of the corresponding labels that you would put next to the control and just show that toggled text in the control itself.  For example I want a switch with the onLabel="Edit Mode" and offLabel="View Mode".

[Kiril Nikolov]

Hi Bob,

This can be achieve with some custom CSS rules, that will make the switch wider, so longer text is shown. I have created an example that shows the implementation, please check it out and let me know if it helps:

http://jsbin.com/pujug/1/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Ezequiel]

I have one switch on a page and another in a popup window.

Only this one in pop up window I need to have longer labels.

How can I do to apply only to this one?

your sample code is already only at the pop up window.

<input id="approval-switch" data-bind="checked: IsApproved" />
            <style scoped>
                .km-switch {
                    width: 8.2em !important;
                }

                .km-switch-background {
                    background-position: 0em 4em !important;
                    width: 8.2em;
                }

                .km-switch-label-on {
                    left: -400%;
                }

                .km-switch-label-on,
                .km-switch-label-off {
                    white-space: nowrap;
                }

                .km-switch-label-off {
                    left: 25px;
                }

                .km-switch-label-on {
                    right: 20px;
                }
            </style>

 

 

[Stefan]

Hello, Ezequiel,

In order to modify only one of the switches, I can suggest making the CSS selectors more specific.  For example, adding the switches containers in the selectors:

.popup-container .km-switch {
  width: 8.2em !important;
}
// other styles

I hope this is helpful.

Regards,
Stefan
Progress Telerik