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>
Related
I am using Emotion in react.
My elements:
<div class="parent">
<span class="one">1</span>
<div class="two">2</div>
<span class="three">3</span>
<div class="four">4</div>
</div>
.parent {
& > *:not(:first-child) {
color: red;
}
}
It has an error from Emotion:
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".
However, it was clear that even replacing :first-child with :first-of-type would not achieve the result I wanted
Have you considered changing all span to div or vice versa?
As suggested by the name, :first-of-type only search for elements with the same type. Since you are mixing div and span, obviously it won't work.
BTW, unless you are doing SSR (e.g. using Next or Gatsby), you can safely ignore that warning.
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.
According to md-tab Documentation we can have custom md-tab-label, which I'm trying to do like this:
<md-tab-label class="my-label">
Label
</md-tab-label>
My css:
.my-label{
background: #40FF00;
}
However, the background color is not appearing for tab labels.
Am I doing something wrong ?
So, I was doing this the wrong way.
The correct way is:
Define your markup
Then add css
In this case, the css can be like:
all-tabs {font-size: 20px;}
.demo-tab {
color:green;
}
and in html:
<md-tab-label>
<all-tabs class="demo-tab"> {{$index+1}} </all-tabs>
</md-tab-label>
Resulting tabs:
I'm using Foundation in a mobile first project where many elements are hidden based on the browser size, and I'm running into some trouble using Foundation's visibility classes like .show-for-small-only as Foundation applies
display: inherit !important;
to any element which uses these visibility classes. (For example, see line 5808)...
.show-for-small-only {
display:inherit !important;
}
This is causing me issues. Say have an element that I want to .show-for-small-only:
<div class="someElem show-for-small-only">
<!-- Content -->
</div>
Yet I want this element, when shown, to be formatted as a display:inline-block element. Due to Foundation's use of !important, the div is forced to assume it's default display state of block.
Is there any workaround to this, short of declaring my styling as !important too? (I don't want to have to do that though)...
I agree, using !important always feels gross.
Precedence in CSS is given to the element furthest down the tree so to override the Foundation !important property, just target an element further down the tree, like so:
<div class="show-for-small-only">
<div class="someElm">
<!-- your content here -->
</div>
</div>
With the following CSS
.someElm {
display: inline-block;
}
Here's a Plunker for kicks (just remember the items wont show up unless the screen is small).
I hope this helps.
To overwrite inportant just declare it again after the first declaration
.show-for-small-only {
display:inherit !important;
}
.show-for-small-only {
display: inline-block!important;
}
<div class="someElem show-for-small-only">
Content
</div>
Here is the link :
www.guidegather.com
(sorry, tried posting image but cannot)
If you look at the footer section, it appears correctly in all major browser (including IE9) but in IE7, the width of the div#mainfooter follows the max-width of .center class instead of extending horizontally to fill the space.
Here is the CSS :
.center{
margin:0 auto;
padding:0 50px;
max-width:960px;
}
#mainfooter{
background-color:#000;
color:#CCC;
list-style:none;
}
Here is how the HTML roughly looks like :
<body>
<div class="center">
Something here
</div>
<div id="mainfooter">
<div class="center">
Something here
</div>
</div>
</body>
As you can see, the div#mainfooter is independent of the previous div, but the width is restricted to the max-width of the previous div (and child div). Any solution to this?
Any help is appreciated. Thanks!
Since #mainfooter's rules will take priority over any inherited rules, you could specify a width for #mainfooter (width: 100%, or barring that, max-width: 100%). That should solve the problem.
So the solution is to add display:block to #mainfooter. Hope this helps anyone facing this issue in the future and great thanks for those who tried helping me