This is a migrated thread and some comments may be shown as answers.

Messages not appearing

2 Answers 797 Views
Switch
This is a migrated thread and some comments may be shown as answers.
Responsive
Top achievements
Rank 1
Veteran
Responsive asked on 24 Aug 2020, 09:55 PM

First time working with this control and not sure what I'm missing.

Code:

 

                        @(Html.Kendo().SwitchFor(model => model.IsEnabled)
                            .Messages(c => c.Checked("Enabled").Unchecked("Disabled"))
                            )

 

The switch shows up and works, but the true and false message labels do not appear.

 

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 26 Aug 2020, 08:16 AM

Hello,

The label of the Switch is designed to not be displayed in the Sass-based Material and Bootstrap themes, as well as the Less-based Material theme. Here is the design reference for the Sass-based Bootstrap theme:

However, in case you would like to enable it, you could use the following CSS:

<style>
  .k-switch-label-on,
  .k-switch-label-off {
    display: block;
  }
</style>

In case you would like to further change the Switch Layout through SASS, we have also prepared an article that demonstrates how several additional layouts for each Sass-based theme could be achieved:

In case you are not using one of the described themes where this behavior is expected, please share which theme is being used in the project so that I am able to examine the issue further.

Regards,
Dimitar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Responsive
Top achievements
Rank 1
Veteran
answered on 26 Aug 2020, 02:39 PM

Thank you. That worked like a charm. Though I did then need to dig a bit figure out how to make the control wide enough to accommodate the label text. Here is the final configuration that's working for me:

@(Html.Kendo().SwitchFor(model => model.IsEnabled)
 .Messages(c => c.Checked("Enabled").Unchecked("Disabled"))
 .Width(90)
)
 
    <style>
        .k-switch-label-on,
        .k-switch-label-off {
            display: block;
        }
    </style>

 

 

Tags
Switch
Asked by
Responsive
Top achievements
Rank 1
Veteran
Answers by
Dimitar
Telerik team
Responsive
Top achievements
Rank 1
Veteran
Share this question
or