CODEWITHSUNDEEP
angular-material
Douglas
Douglas

Reputation: 23

How to use md-chips in line

I'm trying to use the md-chips directive of angular material in a single line, but when I add more chips than size of a field, the field add a line to bottom like in this image.

Upvotes: 2

Views: 4453

Answers (1)

beaver
beaver

Reputation: 17647

I think you need a CSS workaround to adapt the behaviour of md-chips in an input form.

For example you can use this CSS:

/* reduce input element (not visible till the user begins editing) width */
.md-chips .md-chip-input-container input {
  max-width: 20px;
}

 /* adapt input to md-chip height */
.myheight {
  height: 49px !important;
}

/* adapt datepicker input to md-chip height */
.md-datepicker-input {
  height: 49px;
}

Here is a demo: http://codepen.io/beaver71/pen/gPqPBW

P.S.: don't forget that docs declare:

Warning: This component is a WORK IN PROGRESS. If you use it now, it will probably break on you in the future.

Upvotes: 3

Related Questions