Option box width size change in react-select

Question

I would like to change react-select option box width. example here=>

If my content is larger than the option, its show horizontal scroll but I don't want horizontal scroll. How can I change the size of option box width?

Another thing is How can I show the selected value as CscID one even option box is showing CscID + CscDesc? Now when I select the option, its CscID + CscDesc is showing in the selected box.

Here is my Select =>

const formatOptionLabel = ({ CscID, CscDesc }) => (

            <div style={{ display: "flex"}}>
                <div>{CscID}</div>                
                <div>{CscDesc}</div>
            </div>
            );

const customStyles = {
                control: styles => ({ ...styles, }),
                option: (styles) => {

                  return {
                    ...styles,

                   width: '10000px',  //For testing                 

                  };
                },

              };

<Select 
        styles={customStyles} 

            formatOptionLabel={formatOptionLabel}
            getOptionValue={option =>
                `${option.CscID}`
              }
            options={datasource}            

        />

score 8 · Accepted Answer · answered Jul 31 '19 at 01:59

Yes, I can edit the width of option box.

const customStyles = {
                control: styles => ({ ...styles,                 

                }),
                option: styles => ({ ...styles,                 

                }),
                menu: styles => ({ ...styles,                 
                 width: '500px'
                })                 

              };

According to the documentation, Its called menu. If you want to update the other style, check here=> Style Keys

And this option is super helpful for inspecting the menu box => menuIsOpen={true}

Moreover, if you want to make the expanded menu the exact width of the largest option, you can apply this CSS to the `menu:` style: `{ ...styles, width: "max-content", minWidth: "100%" }` — Dave Cole, Jul 28 '21 at 17:21

score 0 · Answer 2 · answered Jul 30 '19 at 07:34

You normally don't change width of the wrapping element in your use case. As the text limit can be any so you wont set the width of select according to the text but the text according to your select's width. Meaning the select will have a fixed width and the text exceeding the the fixed width must be converted to ellipsis through css like

.options-select {
     overflow: ellipsis
}

Ellipsis on hover must show the fullname in a tooltip for better UX.

score 0 · Answer 3 · answered Jul 30 '19 at 08:26

For re-size problem, you may refer to this existing answer: React Select auto size width

For second problem, I don't think it is possible by using react-Select.

If you go to github and look further into the source code of react-Select, you may find that the ValueType of value property is expected to be same as OptionsType of options.

To be precise, the code is "export type ValueType = OptionType | OptionsType | null | void;", which could be found in react-select/packages/react-select/src/types.js
For your convenience, this is the link towards its source code, which can help you figure out more hidden behaviors: https://github.com/JedWatson/react-select/tree/master/packages/react-select/src

Option box width size change in react-select

3 Answers3