Antd how to fixe the size of the multi selection component?

Question

I am using the Ant design components for React. I would like to fixe the size of the multi selection input fields in order to have the selected values into the same line without taking a new line like is the default behavior :

https://ant.design/components/select/#components-select-demo-multiple

I need to have the values ranged into the same line.

I can fixe the size of the input fields by overriding the style

.ant-select-selection--multiple:before, .ant-select-selection--multiple:after  {
display: inline !important;  }

But when I select several values, then they are outside the inputr field.

Afflictive

what is the expected behavior when the row is full then? – Scamp

The behavior that I want was to obtain a div looking like input text field, where there is a scroll and the div do not change the size when the text inside begin longer than the line. I found the solution by adding this css style : .ant-select-selection--multiple { white-space: nowrap; height: 30px; overflow: auto } – Afflictive

Answer 1

Finally I found a solution by adding this css style options :

.ant-select-selection--multiple
{
   white-space: nowrap;
   height: 30px;
   overflow: auto
}

Thus the div is looking like an input text field and when the content ground a scroll appear at the right side of the div field.

Afflictive

Wow, amazing solution!!! Thank you, much appreciate that. – Carmancarmarthen

Answer 2

You can specify maxTagCount

 <Select
  mode="multiple"
  maxTagCount={1}
>
  // here is rendering of the Opitons
</Select>

Attis

Answer 3

You could also set maxTagCount to 'responsive' and this will automatically determine that tags that can be shown on one line

<Select
  mode="multiple"
  maxTagCount={'responsive'}
>
  // here is rendering of the Opitons
</Select>

Firedrake