2

When I have too many 'chips' to fit in the <p-chips> component, it starts stretching the component horizontally until it goes off the edge of the page. I'd like it to expand vertically instead, and wrap to the next line (like material UI does).

There doesn't seem to be any options to control overflow behaviour, and if I style the component to be smaller, I just can't see the chips that are overflowing :(

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Ian Grainger
  • 5,148
  • 3
  • 46
  • 72

1 Answers1

2

The chip tokens are positioned with flex so some custom styles will do the trick. Its a shame this isn't the default behaviour.

.p-chips-multiple-container {
  flex-wrap: wrap;
  align-content: space-between;
  padding-bottom: 0;
}

.p-chips-token, .p-chips-input-token {
  margin-bottom: 0.5rem;
}

Take the margin value from whatever theme you have installed.

Zutty
  • 5,357
  • 26
  • 31