垂直堆叠MD芯片 [英] Stack md-chips vertically angularjs

问题描述

我正在测试AngularJS中的md-chips指令.

I'm testing out the md-chips directive in AngularJS.

有什么方法可以垂直堆叠筹码"，而不是水平附加筹码?

Is there any way of stacking the 'chips' vertically instead of appending the chips horizontally?

我一直在尝试在这里找到的演示:

I have been trying out the demos found here:

https://material.angularjs.org/latest/demo/chips

推荐答案

以下CSS样式是使芯片垂直堆叠所需的最低要求:

The following CSS style is the minimum needed to enable chips to stack vertically:

md-chip {
  clear: left;
}

md-chip的默认CSS为 float: left并应用clear: left会使芯片彼此清除并垂直堆叠.应用float: none或其他样式来更改浮点数似乎很容易破坏默认指令，并使该指令无法访问输入字段并添加新芯片.我注意到，可能需要采用其他样式来修复包含芯片的.md-chips容器，例如限制其宽度以获得所需的结果.

The default CSS of md-chip's is float: left and applying clear: left causes the chips to clear each other and stack vertically. Applying float: none or some other styles to change the float appears to easily break the default directive and causes one to be unable to access the input field and add new chips. I note that some other styles may need to be applied to fix the .md-chips container containing the chips such as limiting its width to get the desired result.

请参阅:在Codepen上垂直堆叠芯片的演示

这篇关于垂直堆叠MD芯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！