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.


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.






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.



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

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.