如何在线使用MD芯片 [英] How to use md-chips in line

问题描述

我正在尝试在一行中使用角材料的md-chips指令，但是当我添加的芯片多于一个字段的大小时，该字段会在该行的底部添加一行，例如

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.

推荐答案

我认为您需要一种CSS解决方法来适应

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

例如，您可以使用以下CSS:

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;
}

这是一个演示: http://codepen.io/beaver71/pen/gPqPBW

P.S .:别忘了文档声明:

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.

这篇关于如何在线使用MD芯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！