如何在线使用 md-chips [英] 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 解决方法来适应 md-chips 在输入表单中.

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-chips的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！