2

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.

beaver
  • 17,333
  • 2
  • 40
  • 66
Douglas
  • 23
  • 1
  • 5

1 Answers1

3

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.

beaver
  • 17,333
  • 2
  • 40
  • 66
  • In your example, the component does not show what are being write and when the space limit of the line is reached they create a new line below, the behavior that i want to avoid to create a new line below and continue in the same line hiding the firsts 'tags' that are in the left. thanks for your help – Douglas Feb 13 '16 at 12:53
  • Probably to obtain what you desire you need another component. This one has an 'invisible' input element and has no horizontal scroll for chips already in – beaver Feb 13 '16 at 16:36
  • to show multiple chips inline: `` – jaggedsoft Sep 30 '16 at 03:00