Long custom labels

4 posts, 0 answers
  1. Chiefs IT
    Chiefs IT avatar
    1 posts
    Member since:
    Sep 2013

    Posted 03 Oct 2014 Link to this post

    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".
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2598 posts

    Posted 07 Oct 2014 Link to this post

    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:


    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ezequiel
    Ezequiel avatar
    37 posts
    Member since:
    Oct 2011

    Posted 06 Feb in reply to Kiril Nikolov Link to this post

    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-off {
                        white-space: nowrap;
                    .km-switch-label-off {
                        left: 25px;
                    .km-switch-label-on {
                        right: 20px;



  4. Stefan
    Stefan avatar
    1657 posts

    Posted 08 Feb Link to this post

    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.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top