How do I set a custom color on a checkbox element in MDC-Web using basic CSS/HTML/JavaScript?
Example: How to make this checkbox background lightblue?
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<style>
:root {
--mdc-theme-primary: blue;
--mdc-theme-accent: lightblue;
}
.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::before,
.mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::after {
background-color: rgba(66, 66, 66, 0.08);
}
</style>
</head>
<body>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
id="my-checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="my-checkbox">My Checkbox Label</label>
</div>
</body>
:root {
--mdc-theme-primary: blue;
--mdc-theme-secondary: lightblue;
}
Material Components for the Web now uses the css variable mdc-theme-secondary rather than --mdc-theme-accent for secondary colours.
This was changed in version 0.18.0
Related
I bumped into a problem with Cypress. I just couldn't check the radio button.
I have 7 questions with Yes or No radio buttons. By default, all buttons are checked to "NO". I need to check the "YES" options, it will send an API call to the backend and continue to do magic.
The html code for YES looks like this:
<input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
The html code for NO looks like this:
<input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
By default the NO radio button has property: checked: true , the YES radio button has property: checked: false
This is my tries:
cy.get('[class="sc-fzoJMP"]')
.find('.list-group-item')
.then((item) => {
cy.wrap(item)
.eq(0)
.should('contain', 'Is this opportunity?')
.find('input[type="radio"]')
.then((radioButtons) => {
cy.wrap(radioButtons).eq(0).check({ force: true }).should('be.checked');
});
I used different locators, tried ('[type="radio"]'), (':radio'), ('#options[0]radiovalue-true') I used different check methods: cy.get(':radio').click({force: true}) , cy.get(':radio').check('true', {force: true}) and tried to move code with checking radio buttons out of the loop but this is something else. It doesn't check the radio button but can verify that it's not checked.
I found one solution to use invoke property:
cy.wrap(radioButtons).eq(0).invoke('prop', 'checked', true).should('be.checked');
cy.wrap(radioButtons).eq(1).invoke('prop', 'checked', false).should('not.be.checked');
But it's checking "YES" radio button but it's not unchecking "NO" radio button and it doesn't send API call to the backend as supposed to do.
This is full HTML code for YES and NO radio buttons:
<div class="d-flex ">
<div class="mr-4" style="position: relative;">
<div class="form-check">
<input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
<label for="options[0]radiovalue-true" class="ml-0 form-check__radio form-check-label">
<svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
<title>Select Option</title>
<circle cx="12" cy="12" r="9" stroke="#666666" stroke-width="2" fill="white"></circle>
</svg>
<p class="sc-fznyAO hdDwJr ml-1 typography-body ">Yes</p>
</label>
</div>
</div>
<div class="mr-4" style="position: relative;">
<div class="form-check">
<input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
<label for="options[0]radiovalue-false" class="ml-0 form-check__radio form-check-label">
<svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
<title>Selected Option</title>
<circle cx="12" cy="12" r="9" stroke="var(--dcp-color-primary)" stroke-width="2" fill="none"></circle>
<circle cx="12" cy="12" r="5" fill="var(--dcp-color-primary)"></circle>
</svg>
<p class="sc-fznyAO hdDwJr ml-1 typography-body ">No</p>
</label>
</div>
<div class="action-field-wrapper is-action-field"></div>
</div>
</div>
The id's that have been assigned contain characters that don't work with # notation, but you can use attribute notation
cy.get('.list-group-item')
.eq(0)
.find('[id="options[0]radiovalue-true"]') // query id as an attribute
.click()
cy.get('.list-group-item')
.eq(0)
.find('[id="options[0]radiovalue-false"]')
.click()
Specifically, the [] in the ids stops '#options[0]radiovalue-true' from working.
With the expanded fragment, this works
cy.get('input[id="options[0]radiovalue-true"]')
.click({force:true})
.should('be.checked')
You need force:true because of the style opacity:0 and width & height 0.
This means the input is effectively hidden, and there is probably a better way to test this - perhaps clicking on the SVG icons.
You can use the IDs and click to select the 'Yes' or 'No' radio buttons.
cy.get('.list-group-item')
.eq(0)
.find('#options[0]radiovalue-true')
.click() //Clicks Yes
cy.get('.list-group-item')
.eq(0)
.find('#options[0]radiovalue-false')
.click() //Clicks No
I'm currently using react to create a student portal. A functionality that we want to add is to have customized awards for students when they complete a certain milestone. Something like this https://www.pinterest.com/pin/460563499365843175/. We have our own template that we want to follow, where I need to fill in the student's name and achievement, which is obviously different for everyone. Is there any component/api I can use to do this through react? I'm open to all ideas and suggestions. Thanks!
If I understand you correctly, you will want to create a custom component per award type, with images, boiler-plate text and input fields. You can pass in to these components the props you will need e.g. Name, Date etc. You can then render this component only when necessary, passing in the individual student's details, to presented in the input fields. You can use CSS to style the component however you'd like, e.g. removing top/left/right borders around fields etc.
There are no bespoke components like this I'm aware of, but it wouldn't be too difficult to create one yourself.
const Award = ({type, name}) => (
<div class="award">
<div class="header">Award of Excellence</div>
<div class="type">
<label htmlFor="type">for</label>
<input type="text" id="type" name="type" value={type} />
</div>
<div class="recipient">
<label htmlFor="recipient">Awarded to</label>
<input type="text" id="recipient" name="recipient" value={name} />
</div>
<div class="footer">
<div>
<input type="text" id="date" name="date" value={new Date()} />
<label htmlFor="date">Date</label>
</div>
<img class="medal" src="https://www.diggerland.com/wp-content/uploads/2015/01/Gold-medal1.png" alt="medal" />
<div>
<input type="text" id="signature" name="signature" value="Professor Plum" />
<label htmlFor="signature">Signature</label>
</div>
</div>
</div>
);
ReactDOM.render(<Award type="1st Award" name="John Smith" />, document.body);
.award {
display: flex;
flex-direction: column;
align-items: center;
}
.type, .recipient, .footer > * {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
font-family: "luminary";
}
.footer {
display: flex;
padding: 2rem;
}
.medal {
height: 4rem;
}
input {
border-width: 0 0 0.1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
i saw this in a angularJS App:
Maybe he's drawing borders?? Any ideas how i could do this properly?
The color should be changeable.
I made a plunker where you can change the color of the dot with ngStyle, please take a look at it.
Using ngStyle you can also change the background-color within a controller.
HTML code:
<body ng-app="">
<input type="button" value="change color to blue" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="change color to red" ng-click="myStyle={'background-color':'red'}">
<div class="circle" ng-style="myStyle"></div>
</body>
CSS code:
.circle {
height: 20px;
width: 20px;
background-color: red;
border-radius: 10px;
}
how i add text in p tag?
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 350px;"><span id="cke_44" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, editor2" aria-describedby="cke_106" tabindex="0" allowtransparency="true">
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<p>
<br type="_moz">
</p>
</body>
</html>
</iframe>
</div>
i use this code but the give error
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
You'll need to switch to the iframe's page context to do this:
browser.switchTo().frame($('.cke_wysiwyg_frame'))
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
// switch back to the "parent page" context
browser.switchTo().defaultContent()
(N.B. This is a follow-on from another question.)
Here is some simple HTML, CSS, and AngularJS to display three pictures of bullfinches from flickr:
<html ng-app="AngularSVGTestApp">
<head>
<title>Angular SVG Image Size Test</title>
<style>
svg {
background-color: aqua;
}
</style>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<div ng-cloak>
<svg ng-show="mainCtrl.svg.show" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" width="200" height="400">
<!-- https://www.flickr.com/photos/yeliseev/10116904936 -->
<image xlink:href="https://farm6.staticflickr.com/5535/10116904936_870f94488d_m.jpg"
x="20" y="20"
width="100" height="100"/>
<!-- https://www.flickr.com/photos/yeliseev/112992806 -->
<image xlink:href="https://farm1.staticflickr.com/38/112992806_780ebcd0ce_m.jpg"
x="20" y="140"
ng-attr-width="mainCtrl.svg.style.width"
ng-attr-height="mainCtrl.svg.style.height" />
<!-- https://www.flickr.com/photos/yeliseev/4433515854 -->
<image xlink:href="https://farm5.staticflickr.com/4058/4433515854_41152445a9_m.jpg"
x="20" y="260"
ng-style="mainCtrl.svg.style" />
</svg>
</div>
<script src="/Scripts/angular.js"></script>
<script>
angular.module('AngularSVGTestApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.svg = {
show: true,
style: {
width: 100,
height: 100
}
};
}]);
</script>
</body>
</html>
fiddle
The three bullfinch images within the SVG differ in how their size is set.
Has its width and height set to 100 explicitly in the HTML
Has its width and height set to 100 using ng-attr-width and ng-attr-height to bind to model values held in the controller
Has its width and height set to 100 using ng-style to bind to model values held in the controller
Why don't either of these latter two methods work? What should I use to bind the dimensions of an image in an SVG from AngularJS?
it should be like, here is the doc
ng-attr-width="{{mainCtrl.svg.style.width}}"
ng-attr-height="{{mainCtrl.svg.style.height}}"
jsFiddle
as for ngStyle
here is the answer . In short, I don't think you can do that with ngStyle.
Here is some ref. It shows you how to do it in CSS correctly.