hit tracker

Floating label

Home » Floating label

Floating label support for md-chips in AngularJS

in AngularJS, UI by Selva Kumar Comments are off

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
angular1

angular2

https://material.angularjs.org/latest/#/demo/material.components.chips

angular3

angular4

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.

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.
angular5

angular6

angular7



We can fix these issues by customizing the angular-material.css

angular8
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.