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>
Ant design always has colons after label in form input.
Is it possible to remove that?
https://ant.design/components/form/#components-form-demo-layout
set colon prop for form tag to false
<Form
colon={false}
>
</Form>
You can remove it by using css
.ant-form-item label:after {
content: none;
}
By the way, AntD doesn't show the colon on mobile.
I'm trying to change md-button text color using accent Palette color using Angular material 1.0.9 version. But it is not changing button text color.
If i'm using latest beta it got fix. But i'm not going to production with this unstable version.
Code:
<md-toolbar class="md-primary md-hue-1">
<div class="md-toolbar-tools">
<md-button class="md-accent">My Profile</md-button>
</div>
</md-toolbar>
Below are the plnkr urls:
Angular material 1-0-9 Plnkr URL
Angular material Latest beta Plnkr URL
Can anyone suggest a fix?
It appears that with V1.0.9 md-accent within md-toolbar does not work for non-raised buttons but only for raised ones. It works for non-raised buttons outside md-toolbar.
The fix would be CSS
.md-toolbar-accent span {
color: #6A1B9A;
}
Plunker.
I have check and found the md-accent was override by some class from md-toolbar as you can see as below image
So If you still want to use the color, just added new class
.md-button.md-accent {
color: rgb(106,27,154) !important;
}
What is the best way to set the width of a Material Design Lite multi-line TextField? I set the CSS width to a pixel value, and it works, but when you click on it to enter some text, the underline highlighting does not extent out to the full width of the component. I tried cols="80" and that did not work. I also tried width="100%" and that did not work. I'm working in ReactJS and TypeScript if that makes a difference.
The width needs to be set on the mdl-textfield container div for the text field. For example, this works:
.mdl-textfield{
width:500px;
}
Though that will style all of your textfields. If you only want one of them to be that wide, then define an id or class on the same div as has the mdl-textfield class and apply the style to that. For example:
<div class="mdl-textfield mdl-js-textfield extrawide">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
with the css
.extrawide{
width:500px;
}
I was using angular material. I find it very cool, well designed and user friendly.
I was trying to change or remove the calendar icon on datepicker directive.
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
The default icon is very good but i want to skip the icon in some case. well i can use svg icon using md-icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
Here is my sample plunker. Suggest me some idea to change/remove the default icon on datepicker.
Angular Material 1.1.0 has a solution, although it seems undocumented.
From angular-material/modules/js/datepicker/datepicker.js:
* #param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the
* datepicker to not align properly with other components. **Use at your own risk.** Possible values are:
* * `"all"` - Hides all icons.
* * `"calendar"` - Only hides the calendar icon.
* * `"triangle"` - Only hides the triangle icon.
Usage:
<md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>
The original question was how to "to change or remove the calendar icon on datepicker directive."?
I just know how to remove it.
You can remove the calendar icon by simply putting the following in a CSS file and adding it to your page:
.md-datepicker-button {
display: none !important;
}
.md-datepicker-input-container {
margin-left: 0 !important;
}
Here is a better solution.
create a button with another icon and place it in the same div with datepicker
<div flex=40>
<md-icon md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the button postion to cover the orginal datepicker icon
<div flex=40>
<md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
</div>
set the the original datepicker icon to apparent.
.md-datepicker md-icon {color: rgba(0,0,0,0) !important;}
.md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
.md-datepicker-button.md-icon-button {
display: none;
}
This one works for me.
They do not provide an API option for specifying the icon, and as you can see from datepicker template.
The md-calendar icon is hard-coded inside the template. I suggest creating yourself a directive based from theirs and change it directly.
The solution provided by Ralph is kind of complex which is i have to create a new directive from their directive. I found a simple solution to this problem. The template of this md-calendar is using a button with an icon like this
<md-button class="md-datepicker-button md-icon-button" type="button"
tabindex="-1" aria-hidden="true"
ng-click="ctrl.openCalendarPane($event)">
<md-icon class="md-datepicker-calendar-icon" md-svg-icon="md- calendar">
</md-icon>
</md-button>
So i change the css of class md-datepicker-buttonand hide the button
.calendarDiv .md-datepicker-button{
display: none;
}
and use another custom icon like this
<md-icon md-svg-src="calendar.svg"></md-icon>
The icon isn't functional as default iconbut this would solve my problem .
This is my sample solution plunker.
You can change and hide the icon in the following way:
First give the md-datepicker an id (or class to target more then one):
<md-datepicker id="my-date-picker"></md-datepicker>
Then you can target the icon in css and change the color, size, display etc:
#my-date-picker .md-datepicker-calendar-icon {
color: green;
display: none;
}
md-datepicker now has a configuration attribute for hiding the icons. From the docs:
md-hide-icons String
Determines which datepicker icons should be hidden. Note that this may cause the datepicker to not align properly with other components. Use at your own risk. Possible values are:
"all" - Hides all icons.
"calendar" - Only hides the calendar icon.
"triangle" - Only hides the triangle icon.
Using CSS to override the default triangle icon (I want the calendar icon on the right) using a custom theme with the FontAwesome icon
/* override md material*/
.md-custom-theme .md-datepicker-input-container {
width: 100%;
border: none;
}
.md-custom-theme .md-datepicker-expand-triangle {
border:none;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-transform: none;
transform: none;
top: 6px;
right:0;
}
.md-custom-theme .md-datepicker-expand-triangle:before {
content: "\f073";
}
Just remove date-picker toggle for icon remove(I am using latest files of Angular Material)
<mat-form-field appearance="outline" (click)="from_date.open()">
<mat-label>From Date</mat-label>
<input matInput [matDatepicker]="from_date">
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
<mat-datepicker #from_date></mat-datepicker>
</mat-form-field>
Remove this line
<mat-datepicker-toggle matSuffix [for]="from_date"></mat-datepicker-toggle>
You can use mat-icon in combination with mat-datepicker-toggle to change the calendar icon of mat-datepicker
<input [matDatepicker]="basicDatepicker">
<mat-datepicker-toggle [for]="basicDatepicker">
<mat-icon matDatepickerToggleIcon>
mouse
</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #basicDatepicker></mat-datepicker>
instead if mouse you can use your costume icon by:
<mat-icon fontIcon="myCustomIcon"> </mat-icon>
For reference : https://www.angularjswiki.com/material/datepicker/
I know how to remove it.
Just copy and paste the code below in your css
div.layout-align-start-start.layout-row>.md-icon-button.md-button.md-ink-ripple:not(.md-raised){
display: none;}