React-select: Fit contents in flex layout

[artooras]

I have a very simple setup - a display: flex header with a logo on the left and a react-selecton the right.

But, as you can see, react-select doesn't stretch to fit the value. I've tried a lot of options, but nothing seems to work. Does anyone have a solution?

Here's the sandbox.

I have asked this question on SO as well, with little traction...

[bladey]

Hi @artooras,

Have you tried to wrap the Select component with another styled div?

I've created an example here which expands the select width - https://codesandbox.io/s/dreamy-water-vbnht

[ebonow]

@artooras Hello again,

The styling I think you are looking for is based on the SingleValue. Since the default styling is set to position: absolute, it will not flex without some styling overrides.

I responded to a thread recently discussing how to create an inline React-Select (with a working sandbox example). While you would likely want to keep the Indicators and borders, it should fit as a proof of concept of flexing the width of the Select to fit the value.

This is likely the bit of styling you are looking for to apply to the SingleValue component

/* Position value relative (instead of absolute) and remove transform and max-width */
.react-select .react-select__single-value {
  position: relative;
  transform: none;
  max-width: none;
}

[artooras]

Thanks @ebonow , I ended up using a version of your solution. I used position: relative on singleValue.

[ebonow]

I spent the weekend looking at different styling methods trying to break the old habits of using classNames everywhere. That said, this would likely be more the recommended way for anyone else in the future looking to solve a similar problem.

const styles = {
  singleValue: inlineCss => ({ ...inlineCss, position: 'relative' })
};

<Select styles={styles} ...>

In either case, glad it worked out.

[bladey]

Thanks @ebonow for your assistance!