Label the Kendo Switch device

While using the Switch Component from Kendo UI for Angular, I ran into an issue. The default labels "On" and "Off" were missing on my switch component even though they appeared in the documentation default switch. Upon further investigation, I found the "offLabel" and "onLabel" properties. I implemented them in my code but still couldn't see the labels.

This is what my component.html looks like:

<kendo-switch name="isActive" onLabel="Yes" offLabel="No" class="switch" [(ngModel)]="inspectionPlan.isActive"></kendo-switch>

Upon inspecting with Browser DevTools, I noticed this:

<span class="k-switch-label-on" aria-hidden="true"gt; Yes </span>
<span class="k-switch-label-off" aria-hidden="true"> No </span>

I suspect that the labels are not visible due to the aria-hidden property, but I am unsure why it is set to hidden by default. Does anyone have a solution to remove this property?

htmlcssangularkendo-ui

Answer №1

Many kendo themes opt to conceal the labels, but the default theme chooses to display them...

To reveal the labels, I utilize this CSS code:

.k-switch.k-switch-md {
  width: 4.5rem;
}
   
.k-switch-label-off, .k-switch-label-on {
    display: inline;
    width: calc(100% - 2em - 12px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: none;
    line-height: 2em;
    overflow: hidden;
}
.k-switch-label-on {
  color: #FFF;
  text-align: left;
  left: 8px;
}
.k-switch-label-off {
  color: #333;
  text-align: right;
  right: 8px;
}

For a demonstration, check out this DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting problems with Isotope jQuery plugin's layout

Setting up Isotope on this website is proving to be a bit tricky. It's supposed to handle the layout and allow me to append items to the container. The problem lies in the fact that the images don't seem to initialize properly. Here's how I ...

javascriptjquerycss

Is it possible for transclusion to display content from external sources using *ngIf and <ng-content>?

In my Angular4 Project, I have come across this snippet of code: <div class="divider"></div> <ng-content select=".nav-toggle"></ng-content> Now, I am trying to figure out a way to display the divider only when there is content pr ...

angulartypescript

Circular Graphical Representation using CSS3 styling

Check out my latest creation - a donut chart: http://jsfiddle.net/4azpfk3r/217/ I'm trying to customize the appearance of the donut chart. Is there a way to give it a red outline and have the filled score/percentage in solid red, while leaving a tran ...

csssvg

CSRF token not recognized. Request cancelled. Even after including the CSRF token {% csrf_token %}, the error persists

I'm encountering an issue with the CSRF token being incorrect or invalid. I have included the {% csrf_token %} above my form, but I am still facing this problem. Can anyone assist me with this? Here is a snippet of my HTML file: <h4>regist ...

pythonhtmldjangoformscsrf-token

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

I've created an upload form that allows users to submit images: <form> <input accept="image/jpeg, image/gif, image/png" type="file" name="image" id="image" class="UploadInput" onchange="submitImageUploaderForm()"/> </form> Once t ...

javascripthtmlajaxjquery

Create a hexagon shape using a Div element and start from one of its sides

Is there a way to create a Div with a background image that appears like a hexagon when viewed from one side? Check out this demo to see exactly what I'm looking for: Demo In the example/demo, the header is designed to look like a hexagon from its ...

htmlcss

Is there a way to display all these HTML elements on a single line?

I have a challenge of displaying 4 elements in a single line on my website. They include: <input checked type="radio" name="TZ" id="local-time" ></input> <p id="inp-n1" class="disp">Lo ...

htmlcss

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...

javascriptcssperformance

Exploring the synergy between Visual Studio 2015 and Angular2 Beta 2's dependency injection functionality

Currently, I am using VS2015 alongside TypeScript 1.7.3 and Angular2 Beta 2 with a target of ECMA 5. In order to enable experimental decorators in my project, I have made modifications to the csproj file by including TypeScriptExperimentalDecorators = true ...

dependency-injectiontypescriptvisual-studio-2015angular

Displaying images on the left side using CSS is causing issues in an ASP.NET project

Having trouble displaying a girl image in asp.net. I'm aiming for the following result: The problem is that the girl's face is not showing up correctly as shown below: This is the CSS I have created: .testimonialstilabel { background-image ...

asp.netcssc#-4.0

Is your Drag and Drop feature in HTML5 acting up?

I am currently exploring the drag and drop functionality in HTML5. I have successfully managed to make an element draggable and ensure that the designated target accepts the dragged element. However, I am facing issues with getting the ondrag, ondragenter ...

javascripthtmldrag-and-drop

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

htmlcsstweets

Updating the class of the "like" button icon using an AJAX form within the HTML view of a Ruby on Rails application

I'm facing an issue where my page isn't updating the icon after a successful Ajax function. Even though the data is posted to the database without any problems, the content doesn't refresh unless I manually reload the page. I want to be able ...

javascriptjqueryhtmlruby-on-railsajax

The ongoing challenge with the 'active' class in jQuery

Here is an example of a menu: <ul class="nav nav-list"> @for (int i = 1; i <= pageno; i++) { <li> <a href="~/Insts?page=@i&count=10">@i</a></li> ...

jqueryhtml

Tap on the HTML5 video to exit the fullscreen mode

Objective I have successfully implemented a fullscreen video setup that triggers when a link is tapped on a mobile device. To maintain a clean aesthetic, I have hidden the HTML5 video controls using CSS. The desired functionality includes closing the full ...

javascripthtmljquerygoogle-chromevideo

Is less.js capable of compiling CSS code that is compatible with all browsers?

Is there a simple way to convert my Less code into browser-compatible CSS like the example below? #grad1 { background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to ...

cssless

How to allow users to input strings on web pages with JavaScript

I created a Language Translator using java script that currently translates hardcoded strings in an HTML page. I want to enhance its flexibility by allowing users to input a string into a textbox/textarea for translation. Any assistance would be greatly a ...

javascripthtml

Warning: Fastclick alerting about an ignored touchstart cancellation

Having an issue with a double popup situation where the second popup contains selectable fields. Below is the code snippet I am using to display the second popup: $("#select1").click(function(e) { e.stopPropagation(); var tmplData = { string:[& ...

javascriptjqueryhtmlcordovafastclick.js

Issue with Angular Routing Cannot Be Identified

Recently, I decided to dive into learning Angular and came across the routerLink directive which allows Angular to change routes without refreshing the page. However, I've run into a bit of an issue. In my code snippet below, you'll notice that a ...

angular

Display a variety of components in a single route

I have a question: Is it possible to show multiple components in one route in Angular 7? For example, if the route is '/' then I want to display HeaderComponent and SideBarComponent. So when the path is '/home', these two components alo ...

angular