search

hc-oss / react-multi-select-component

Lightweight (~5KB gzipped) multiple selection dropdown component
https://codesandbox.io/s/react-multi-select-example-uqtgs
MIT License
387 stars 89 forks source link

MultiSelect width #716

Open Shamsa-Ali opened 1 year ago

Shamsa-Ali commented 1 year ago

Describe the bug hi there, I don't know if it's a bug or I'm doing something wrong. But I need help with the width of the MultiSelect. If I don't select any value the width of the field is small but as I keep selecting values from the dropdown, the width keeps increasing. I just want the width to be fixed. Anyone, any help would be great.. please the first screenshot is when no values are selected, and the second screenshot is when all values are selected except 1 and the last screenshot is when all value are selected .. you can notice the widths image image image this is the code

<div
                        style={{width:"80%"}}
                      >
                        <MultiSelect
                        className='w-80'
                        label='Select Product'
                        options={productOptions1}
                        value={product1}
                        onChange={setProduct1}
                        isClearable={true}
                        labelledBy="Select"
                        invalid={true}
                        autosize={false}

                    />  
                      </div>
MuhammadRehanRasool commented 1 year ago

Describe the bug hi there, I don't know if it's a bug or I'm doing something wrong. But I need help with the width of the MultiSelect. If I don't select any value the width of the field is small but as I keep selecting values from the dropdown, the width keeps increasing. I just want the width to be fixed. Anyone, any help would be great.. please the first screenshot is when no values are selected, and the second screenshot is when all values are selected except 1 and the last screenshot is when all value are selected .. you can notice the widths image image image this is the code

<div
                        style={{width:"80%"}}
                      >
                        <MultiSelect
                        className='w-80'
                        label='Select Product'
                        options={productOptions1}
                        value={product1}
                        onChange={setProduct1}
                        isClearable={true}
                        labelledBy="Select"
                        invalid={true}
                        autosize={false}

                    />  
                      </div>

Applying "max-width" may help you.