I have an md-select in my form with multiple options (same as demo in Angular Material site). It shows a comma separated list of selected options in its input field. Is there any way to change separator? (for example change comma to star or another UTF-8 character).
You can do something with pure CSS. You should hide the commas using visibility: collapse and after that, you can add a Unicode icon with :after or :before pseudo-element.
PLUNKER
HTML
<md-select class="my-select" ng-model="vm.selectedItem" multiple>
<md-option ng-value="item.id" ng-repeat="item in vm.items">{{ item.name }}</md-option>
</md-select>
CSS
.my-select[multiple] .md-select-value span:first-child {
visibility: collapse;
}
.my-select[multiple] .md-select-value .md-text {
display: inline-block !important;
visibility: visible;
}
.my-select[multiple] .md-select-value .md-text:not(:last-child):after {
content: '\2605'; /* star */
margin: 0 -5px 0 5px;
}
There you go a list of Glyphs that you can use.
Also, you can add a font-awesome icon with css if you want.
So I'd like to make the select tag dropdown look like a normal text link, but when clicked have it still activate ionics select (mobile dropdown) feature.(http://ionicframework.com/docs/components/#select)
This plunkr down below shows the look of the dropdown box I don't want. Can anyone help me turn the dropdown box into a text link please!
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
https://plnkr.co/edit/A9ycYBKC1GUDhpCiskr5?p=preview
Adding the following to your plunker works:
<style>
select{
-webkit-appearance:none;
outline: none;
border: none;
background: none;
color: blue;
text-decoration: underline;
}
</style>
One possibility is to remove the select entirely and mock it using an unordered list. Example.
Link
<ul ng-if="show">
<li ng-repeat="color in colors">
{{color.name}}
</li>
</ul>
I want to add a 1px border to the select box ( md-select ) of angular material.
How do I do it using CSS?
In latest angular versions, md-select is renamed as mat-select and to add border to mat-select, you can use mat-form-field in your html file as follows:
<mat-form-field appearance="outline">
<mat-select placeholder="Select your option">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
Here appearance="outline", will add border to the select box.
This is how I did it. Easy-peasy!
Add CSS for md-select tag
md-select {
background-color: white;
color: black;
border : 1px solid #666666;
}
md-select {
border: 1px solid #cbcbcb;
}
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;
}
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;}