I need help setting informational text on an md-switch element from Angular Material design. I want the user to be able to easily understand the current state of a field value. Here is a visual example of what I'm trying to achieve: https://i.sstatic.net/dxRLJ.png
Can someone guide me on how to do this? I'm still learning about material design.
If you want to apply a label to md-bar using CSS, you can try the following approach:
md-switch.inline-label .md-bar::before {
position: absolute;
font-size: 9px;
line-height: 13px;
content: "off";
right: 0;
padding-right: 3px;
}
md-switch.inline-label.md-checked .md-bar::before {
content: "on";
left: 0;
padding-left: 3px;
}
To implement this, add the class inline-label to your md-switch:
<md-switch class="inline-label" ng-model="data.cb1" aria-label="Switch 1">
Switch 1: {{ data.cb1 }}
</md-switch>
angular.module('MyApp', ['ngMaterial'])
.controller('SwitchDemoCtrl', function($scope) {
$scope.data = {
cb1: true,
cb4: true,
cb5: false
};
$scope.message = 'false';
$scope.onChange = function(cbState) {
$scope.message = cbState;
};
});.switchdemoBasicUsage .inset {
padding-left: 25px;
padding-top: 25px;
}
md-switch.wlabel .md-bar::before {
content: "off";
position: absolute;
right: 0;
font-size: 9px;
line-height: 13px;
padding-right: 3px;
}
md-switch.wlabel.md-checked .md-bar::before {
content: "on";
left: 0;
padding-left: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css" rel="stylesheet" />
<div class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-cloak="" ng-app="MyApp">
<md-switch class="wlabel" ng-model="data.cb1" aria-label="Switch 1">
Switch 1: {{ data.cb1 }}
</md-switch>
<md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
Switch 2 (md-warn): {{ data.cb2 }}
</md-switch>
<md-switch ng-disabled="true" aria-label="Disabled switch" ng-model="disabledModel">
Switch (Disabled)
</md-switch>
<md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4">
Switch (Disabled, Active)
</md-switch>
<md-switch class="md-primary" md-no-ink="" aria-label="Switch No Ink" ng-model="data.cb5">
Switch (md-primary): No Ink
</md-switch>
<md-switch ng-model="data.cb6" aria-label="Switch 6" ng-change="onChange(data.cb6)">
Switch 6 message: {{ message }}
</md-switch>
</div>I have been working on creating a jQueryUI menubar using JSON data. The JSON data is successfully being converted into valid HTML, but the menubar does not display with the desired styling. It appears as an unstyled unordered list rather than a styled menu ...
Currently, I am involved in a project that utilizes Angular with Ionic. An issue has arisen in a specific page containing numerous form fields. When navigating through these form fields, the webpage suddenly goes blank. Interestingly, tapping on the WebVi ...
We've implemented babel and lerna to maintain specific elements of our react web app separately. While the setup has been effective thus far, we're encountering styling issues when generating the static build. The main project is not processed t ...
I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...
Here is a sample factory class that I am currently working with: angular.module('App') .factory('Session', function($resource) { return { Sessionlogin : function() { return $resource('/api/session/'); }, ...
Currently, I am working on a simple on-page JavaScript application that consists of multiple data pages within one main page. My goal is to create a horizontal accordion effect where clicking on headers on either side will smoothly switch between the diffe ...
body{ margin-bottom: 10%; margin-left: 10%; width:80%; color: #264653; position: relative; } #photo{ border-radius: 70%; position: absolute; left: 25%; top: 50px; } .left1{ margin-top: 10%; background-color: #264653; width : 30%; ...
I'm dealing with a page that has multiple controls. Initially, there is no horizontal scrollbar on the page. However, as soon as I introduce an AjaxControlToolkit.Editor or a treeview onto the page, a horizontal scroll bar mysteriously appears. For ...
I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...
Within my custom AngularJS google maps directive, there is a map directive and a marker directive, with the marker directive depending on the map directive. The issue I am encountering can be simplified as follows, as I am unable to utilize ng-repeat. &l ...
I have successfully implemented a dropdown menu with both text and an icon. However, I am now faced with the challenge of removing the text while retaining the icon when the screen width is reduced to a maximum of 768px. Is it possible to modify the conten ...
Currently, I am in the process of familiarizing myself with CSS3 3D transforms. However, I am encountering difficulties in keeping elements that are undergoing transformation on top of other elements. If you'd like to take a look at what I have accom ...
I am new to coding and exploring html, css, and bootstrap. Is it possible to assign varying numbers of columns to a div based on different resolution ranges for larger devices? Specifically looking at the "lg" range which covers laptops and desktops with ...
After creating a video popup that plays upon clicking a button using jQuery, I encountered an issue where the video continues to play in the background even after closing the popup by clicking the close(X) button. Below is my code, can someone assist me in ...
I am facing an issue with setting random dates in 3 date fields in a row using Protractor. The problem is that Protractor sets the dates too quickly and sometimes assigns invalid dates like: first data: 01/08/1990 (correct) second data: 01/09/0009 (inva ...
As a newcomer but long-time observer, I've been exploring ways to incorporate tooltips into my website design. Bootstrap 5.3 caught my eye with its appealing tooltip options, yet I've hit a roadblock when trying to integrate them into my AngularJ ...
<meta name="viewport" content="width=device-width,initial-scale=0"> I am facing an issue with my code not running on iPhone 6 and causing a problem with the responsiveness of my site. Any suggestions on what steps I should take? The site is constru ...
I have a class called Place public class Place{ public int id; public string name; public string slug; } There are also classes like City, State, and Country which inherit from the Place class. An XML string is received containing an array o ...
Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet: document.getElementById('ImgID1').style.verticalAlign = However, the value by which I need to shift the image is provided thr ...
Struggling with the setup of a single page app using Angular routes on the front end, while facing backend issues. All database-related routes are functional, but any additional route designed to serve an HTML file or simple text like "hello world" result ...