Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Let's explore the styling of a switch element within Angular:

<Switch class="switch" formControlName="answer"></Switch>

One approach involves targeting the switch with checked attribute, setting its background-color and text color accordingly. However, this method may lead to unexpected results after the initial activation.

.switch[checked=true] {
  background-color: #FE4A49;
  color: #FE4A49;
}

Alternatively, applying styles directly to the switch element can result in consistent appearance regardless of its state:

.switch {
  background-color: #FE4A49;
  color: #FE4A49;
}

So, what is the best practice for styling a switch while utilizing Angular's model bindings?

cssangularnativescriptnativescript-angular

Answer №1

Currently, I am working on designing an App and here is how I plan to style it.

CSS:

Switch#userStatus[checked=true]{
  color:#ff0048 ;
  background-color: white;
  transform: scale(1.25, 1.25); // This will adjust the size when checked
  transform: translate(-5,0); // This will help maintain the position after resizing
}

Switch#userStatus[checked=false]{
  color: gray;
  background-color: gray;
}

Below is my XML code snippet:

`<Switch id="userStatus" checked="false" />`

I trust this information proves to be useful!

Answer №2

There was an issue I encountered with a switch element

background-color

where it wasn't functioning as intended. Modifying the background-color ended up changing the entire switch (the gray section). Consequently, I had to only adjust the color attribute:

Switch[checked=true] {
    color: #f68533;
}

Answer №3

.button-unpressed {
    background-color: #FE4A49;
    color: yellow;
}

.button-pressed {
    background-color: blue;
    color: green;
}

Incorporate the following code into your design

<Button #btn pressed="false" (pressChange)="buttonStateChanged(btn.pressed)" [class]="isPressed?'button-pressed':'button-unpressed'"></Button>

Implement this code snippet in your functionality

isPressed:boolean;

 buttonStateChanged(pressed) {
        this.isPressed = pressed;
    }

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

Steer clear of using absolute positioning in Material-UI and React for better styling and layout

Is there a way to achieve the same layout without using position: absolute for the "Hello There" button? I want to remove that CSS property while keeping the design intact. Any better suggestions? Feel free to check out my codesandbox: CODESANDBOX -----&g ...

cssreactjsmaterial-ui

Duplicate user scrolling input within a specified div container

I am attempting to recreate a horizontal scrolling effect on a div element that mirrors the input scroll. When the user scrolls along the input, I want the div element to scroll in sync. The issue I am encountering is specific to Chrome, where the input b ...

javascripthtmlcssgoogle-chromefirefox

How come my flex-box navigation bar is not collapsing as I shrink the browser window size?

I'm currently experimenting with FlexBox to enhance the design of my website, specifically focusing on creating a responsive and collapsible navigation bar for mobile users. I'm encountering issues with the flex commands in the .nbar class not wo ...

htmlcssflexbox

Encountered an error saying "Unable to locate property '0' of undefined" while trying to access an environment variable in MongoDB

I am attempting to access a variable that is defined in my JavaScript code. This variable holds data fetched from a MongoDB using a GET request. The entire database is stored under this variable and then read by the HTML for display. The output of the GET ...

htmlangularmongodb

What could be causing my CSS div class to cover up the image in the background?

Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...

htmlcss

Aligning a number in the center both vertically and horizontally within a div that is inside a table-cell

Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can&apo ...

htmlcss

Searching for two variables in an API using TypeScript pipes

I'm stuck and can't seem to figure out how to pass 2 variables using the approach I have, which involves some rxjs. The issue lies with my search functionality for a navigation app where users input 'from' and 'to' locations i ...

angulartypescriptmapquest

Refresh the block's content seamlessly without the need for a page reload

Within the index.html page There exists a block called content that contains various content blocks. An additional navigation menu with numerous links is present. It is important that when you click on a menu link, the content within the content block re ...

javascriptjqueryhtmlcssajax

Aligning the 'container-fluid' slideshow and video player

I'm struggling to center a video in a slick slider that is set as a 'container-fluid'. The slideshow and video display fine across the full width of the browser, but when I resize the browser window or view the site on a lower resolution, I ...

javascriptjquerycsstwitter-bootstraphtml5-video

Positioning buttons and elements on top of a BootstrapVue Carousel slide: a handy guide

Can different elements be positioned on the BootstrapVue Carousel slide without restrictions, such as in any corner or position? I have attempted to accomplish this by nesting additional elements within <b-carousel-slide></b-carousel-slide> ...

csstwitter-bootstrapvue.jscarouselbootstrap-vue

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

csstwitter-bootstrap

Exploring the world of CSS: accessing style attributes using JavaScript

So I created a basic HTML file with a div and linked it to a CSS file for styling: HTML : <html> <head> <title>Simple Movement</title> <meta charset="UTF-8"> <link rel="stylesheet" type=&qu ...

javascripthtmlcss

There seems to be a problem with the while loop in the PHP code while creating a forum

Encountered a new error that says: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') AND type='o'' at line 1. Can someone assist in fixing this issu ...

phphtmlmysqlcssforum

Step-by-step guide on resolving the error message "Unable to identify the dependencies of task ':app:preDebugBuild'" in Ionic 4 Cordova

Having trouble creating an Ionic 4 android app? Encountering a preDebugBuild error related to play-services-measurement-base and conflicting library versions? I've attempted various fixes including: - Running ionic repair - Reinstalling and updating ...

angularcordovaionic-framework

I am looking to ensure that the ul li a() elements remain hidden until I hover over the h2 tag, at which point they will be displayed

Insert your code here : <table cellpadding="0" cellspacing="0" align="center" class="TblGreen"> <tr> <td> <h2><a href="#" class="AGreen">Sweater</a></h2> <p>The coding business</p> ...

htmlcss

Securing Your Content - Preventing Users from Right-Clicking and Using F12 on Your Website

I am looking to disable the Right-Click function on my website or display an error message saying "Protected Content!" when someone tries to right-click. I want to prevent others from viewing my Source Code. Although I know how to disable Right-Click, I am ...

javascripthtmlcss

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width. I want the navigation to be 80% of the full width, wi ...

htmlwidthbackground-imagecss

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

javascriptjqueryhtmlcsspreloader

Guide on navigating through various HTML pages with distinct parameters using Node.js (Express server)

Seeking assistance with a Node.js server that receives an ID as a query parameter. Each time a client connects with different parameters, I aim to serve them a unique HTML page containing a simple UI with 2 dynamic arrays. Everything seems to be working co ...

javascripthtmlcssnode.js

The Tailwind classes applied directly in HTML are not functional, whereas the ones from the external CSS file are effective

After testing the classes, the intended look of the page should resemble this: https://i.stack.imgur.com/BVs57.png However, it currently appears like this: https://i.stack.imgur.com/AjN3z.png The JSX code in the file is as follows: < ...

cssnext.jstailwind-css