The Angular Material has already become popular and seems to gain a great acceptance worldwide as a general design guideline among the Web. It provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.
https://material.angularjs.org/
Inconsistent UI for md-input fields & md-chips with md-autocomplete
For md-input & md-autocomplete the form fields have floating label (i.e. when the user focuses the textbox or autocomplete the label jumps to top & provides space for entering values ) whereas the md-chips control not providing the floating label option, it just clears the label value and you can type in your values.
https://material.angularjs.org/latest/#/demo/material.components.input
https://material.angularjs.org/latest/#/demo/material.components.chips
To provide the consistent UI effect, here we are going to customize the md-chips with md-autocomplete control. In md-autocomplete control instead of placeholder property we are going to use md-floating-label property.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<md-chips ng-model="ctrl.selectedCities" md-autocomplete-snap="" md-require-match=""> <md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-floating-label="Search for a city"> <span md-highlight-text="ctrl.searchText"><strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>item.name<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong> :: <strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>item.country<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong></span> </md-autocomplete> <md-chip-template> <span> <strong><strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>$chip.name<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong></strong> <em>(<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">{{</strong>$chip.country<strong style="font-weight: bold !important;" data-mce-style="font-weight: bold !important;">}}</strong>)</em> </span> </md-chip-template> </md-chips> |
By using md-floating-label with md-autocomplete we will be able to get the floating label, but the problem is with selected item styles & some padding effects.
We can fix these issues by customizing the angular-material.css
|
1 2 3 4 5 6 7 8 9 |
.md-chips md-autocomplete md-input-container label:not(.md-no-float), .md-chips md-autocomplete md-input-container .md-placeholder:not(.md-select-label) { margin-top: -23px; } .md-chips md-autocomplete md-input-container .md-input { border-width: 0; } .md-chips md-autocomplete md-input-container.md-input-focused .md-input, .md-chips md-autocomplete md-input-container .md-input.ng-invalid.ng-dirty { border-width: 0; } .md-chips .md-chip-input-container md-autocomplete input { position: relative; border: 0px !Important; margin-left: 0px !important; } .md-chips .md-chip-input-container md-autocomplete input:focus { position: relative; margin-left: 0px !important; } |
Hurray!! We have done it. Hopefully this feature will be added to md-chips control in near future.
You can download the sample project from the github.
