Using the polymer paper-swatch-picker, I'm trying to change an icon but it is not getting updated.
In the below there is the CSS code which I have used to change icon. Is it correct?
HTML:
<paper-swatch-picker class="fancy"></paper-swatch-picker>
CSS:
paper-swatch-picker.fancy {
--paper-swatch-picker-color-size: 10px; -- works
--paper-swatch-picker-icon-size: 40px; -- works
--paper-swatch-picker-icon: {
'icon':'menu' -- not works(icon not getting changed)
}
}
You can use the attributes icon to change it instead of CSS. But you need to import the iron-icons/iron-icons.html first, according to the set you use. In this case, you are using menu icon, which belongs to the default set iron-icons.html. For example, maps:...something will belong to iron-icons/maps-icons.html
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-swatch-picker/v2.2.0/paper-swatch-picker/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-swatch-picker.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<style>
paper-swatch-picker {
margin: 0 10px;
}
</style>
<!-- Customized color swatch -->
<paper-swatch-picker icon="menu" color="#E91E63"></paper-swatch-picker>
I have also written an article featuring the top color picker web components, including paper-swatch-picker as well. Here's the link if you want to read.
Related
I'm using toggle checkboxes by Semantic React UI.
The background color of a checkbox is defined in their styles here :
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
background-color: #2185d0!important;
}
... But I would like to be able to set a prop that would change that color, like
<Checkbox toggle toggleColor="red"/>
Could I extend that component to achieve that, or is there another way to achieve this ?
Thanks !
Yes you can, but it is not pretty!
I have a solution that works with semantic-ui and is heavily tested. I assume that it also works with semantic-ui-react but did not test extensively.
First, a color feature for checkboxes is missing from semantic-ui (as far as I can see, there is no documentation about it at least). So you need to use CSS to define your colors. All your colors! So if you have a lot you might to want SASS or something. Also you might want to make a feature request with semantic-ui.
Second, my solution uses the label of the checkbox to color the checkbox. I am fully aware that this is not pretty but this is apparently the only way to do this without too much additional code or even more ugly methods.
Add this to your code (please note, stackoverflow does not render this example properly since the <link rel="stylesheet" href="../semantic_ui/dist/semantic.min.css">is obviously missing. If there is a way to add this on this side please let me know.)
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .coloring.black:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
background: #000000 !important;
}
.ui.toggle.checkbox input:focus:checked ~ .coloring.white:before,
.ui.toggle.checkbox input:checked ~ .coloring.white:before {
background: #FFFFFF !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<div class="ui segment">
<div class="ui attached icon form" id="info_input_form">
<div class="ui toggle checkbox">
<input type="checkbox" tabindex="0">
<label class="coloring black">Toggle</label>
</div>
</div>
</div>
So I was using react-bootstrap dropdown menu and i found a bug that it doesn't close .It actually renders all its options horizontally on my screen.
I searched over Stackoverflow .There were few resembling posts but none of them is for react
<DropdownButton
title={this.state.selectedOption}
id="document-type"
onSelect={this.handleSelect.bind(this)}
>
{myoptions.map((opt, i) => (
<Dropdown.Item key={i} eventKey={i}>
{opt}
</Dropdown.Item>
))}`enter code here`
</DropdownButton>
I expected Nomral Behavior
As per docs,
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Like overlays, Dropdowns are built using a third-party library Popper.js, which provides dynamic positioning and viewport detection.
Also you need to add bootstrap.css, either by adding link in index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
or by importing in index.js file.
Add popper in index.html
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
Demo
I want to use ng-tags-input in my project.
I try to set diffrent color for each tag according to color property object in array.
Here is plunker I am working on.
For this purpose I need to override tag-item css class in ng-input template.
Here is the example of ng-input template:
<script type="text/ng-template" id="tag-template">
<div class="tags-input" ng-style="{background: data.color}">
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
in this row I try to override tags-input css class:
<div class="tags-input" ng-style="{background: data.color}">
And here is result I get:
as you can see on left and right edges not colored.
Any idea what I am doing wrong?And how to override the tags-input css class??
If you look at the markup, you'll see that the .tags-input div where you apply your background color style is embedded into an li element, which has a laft and right padding of 5px. That's why the color is not applied on the full width of the button.
So, make sure to apply your own stylesheet after the ng-tags-input stylesheet, and override some CSS rules in order for the lito have no padding, and for the div with the background color to have a padding instead:
/* override default tag styles for colors to look less ugly */
tags-input .tags .tag-item {
padding: 0;
height: 27px;
}
.tags-input {
padding: 0 5px;
border-radius: 2px;
}
Here's your plunkr modified to make that happen.
notify({
classes: 'alert-danger',
message: response.data.errors[e]
});
I use this https://github.com/cgross/angular-notify
My notify still show blue color.
How to implement this classes?
I had this problem and was able to resolve it by changing the order of the css files in the main index.html file of my angularjs app. Apparently you have to list the angular-notify.css before the bootstrap.css file. This resolved the issue for me.
<link rel="stylesheet" href="bower_components/angular-notify/dist/angular-notify.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
Once I switched the order of the CSS styles, the bootstrap classes apply properly using your code above.
I have built a responsive website with media queries to target different mobile devices but would like to have an "override all" link available on smaller devices. When clicked, the link would remove all media query styles and reset the page to default styles, exposing the site as it would at 1024px wide. Is there a way to achieve this?
The only way you can do this is with Javascript. I came up with two solutions:
id/class on <html> element:
Apply an id or class to the html element: <html class="media-queries">.
In your media-queries, every selector will start with .media-queries:
CSS
#media (max-width: 300px) {
.media-queries #nav li {
display: block;
}
.media-queries #main, .media-queries #aside {
float: none;
}
}
Then, you get JS to remove class="media-queries".
HTML
<a id="del-mq" href="#">Default style</a>
JavaScript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('html')[0].removeAttribute('class');
}
jQuery
$('#del-mq').click(function() {
$('.media-queries').removeClass();
});
Pros: no extra http requests.
Cons: lots of css selectors(.media-queries), which shouldn't be a problem if using Sass:
#media (max-width: 300px) {
.media-queries {
#nav...
#main...
}
}
External media-queries.css
All the media queries go in a separate css file. Include it with <link rel="stylesheet" href="media-queries.css">.
Then you get an ID for the <link> and remove the element.
HTML
<head>
<link rel="stylesheet" href="default.css">
<link id="media-queries" rel="stylesheet" href="media-queries.css">
</head>
<body>
...
<a id="del-mq" href="#">Default style</a>
...
</body>
Javascript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('head')[0].removeChild(document.getElementById('media-queries'));
}
jQuery
$('#del-mq').click(function() {
$('#media-queries').remove();
});
Pros: no need for lots of css selectors.
Cons: extra http request.