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