reactjsselectmulti-selectantd

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

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.

Solution

  • 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.