Changing default css in Angular Material for md-input - angularjs

I have implemented form using angualr-material, I can't find any standard ways to change default color coding in material.
form
<div class="col-xs-12 testFormLabel">
<md-input-container class="testLabel">
<label>Reason</label>
<input name="reasonBox" id="reasonBox" ng-model="obj. reasonBox" ng-required="true">
</md-input-container>
</div>
css
.md-input-has-value. testLabel > input {
color:#008cba;
}
Problem
How can i change auto focus label name and underline to different color ( let say from dark blue to green )

You can use this selector to change the input:
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
border-color: red
}
Use this to change the label:
md-input-container:not(.md-input-invalid).md-input-focused label {
color: red
}
Include this after you include the css for angular material.
I got this by going to the docs page here: https://material.angularjs.org/latest/demo/input
Looking at their demo, and inspecting a focused input.

You can also use <md-input-container [dividerColor]="primary|accent|warn"> to set the color when the field is in focus.
From the docs...
The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.

Related

Semantic React UI : is there a way to change the background color of a checkbox toggle?

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>

How to remove colons in Form.input antd design react?

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.

Button text color isn't changing

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;
}

How to set width of MDL TextArea

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;
}

Remove or change the calendar icon from angular material datepicker

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;}

Resources