Stack md-chips vertically angularjs

问题:

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

回答1:

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

md-chip {
  clear: left;
}

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.

See: Vertically Stacking Chips Demo on Codepen