CODEWITHSUNDEEP
reactjsselectmulti-selectantd
Vicking
Vicking

Reputation: 583

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.

Upvotes: 10

Views: 10872

Answers (3)

Sasha Larson
Sasha Larson

Reputation: 71

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>

Upvotes: 2

Konstantin Yarish
Konstantin Yarish

Reputation: 196

You can specify maxTagCount

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

Upvotes: 11

Vicking
Vicking

Reputation: 583

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.

Upvotes: 8

Related Questions