Last Updated: 09 Sep 2022 08:45 by ADMIN
Created on: 03 Sep 2022 22:25
Type: Bug Report
SASS Theme Builder Generated Incorrect CSS for Telerik Switch using On-Label and Off-Label


The text for the onlabel and offlabel is not shown because the ".k-switch-label-on, .k-switch-label-off" is showing "display: none" and other issues you'll see when testing.  Appears that the SASS Theme Builder doesn't take into consideration the OnLabel and OffLabel parameters.

SASS Theme CSS: line 12087-12096

.k-switch-label-off {
    display: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    overflow: hidden;


<TelerikSwitch class="ml-2" @bind-Value="@isDark" Width="80px" OnLabel="Dark" OffLabel="Light" OnChange="ThemeHandler" />


Attached Files:
1 comment
Posted on: 09 Sep 2022 08:45

Hello Gary,

Bootstrap does not feature switch labels, that's why our Bootstrap theme does not display them either. Your custom theme appears to be using the Bootstrap theme as a base.

So you have two options:

  • Adjust the generated CSS file manually.
  • Create a custom theme from another base theme, and not Bootstrap.

On a side note, I moved this thread from the Blazor feedback portal to the ThemeBuilder portal.

Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.