How can I reduce the width of the dropdown of the select?

Question

I have this code :

import React from 'react';
import chroma from 'chroma-js';

import { colourOptions } from './docs/data';
import Select from 'react-select';

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white', width: '300px' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected
        ? data.color
        : isFocused
        ? color.alpha(0.1).css()
        : null,
      color: isDisabled
        ? '#ccc'
        : isSelected
        ? chroma.contrast(color, 'white') > 2
          ? 'white'
          : 'black'
        : data.color,
      cursor: isDisabled ? 'not-allowed' : 'default',

      ':active': {
        ...styles[':active'],
        backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
      },
    };
  },
  multiValue: (styles, { data }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: color.alpha(0.1).css(),
    };
  },
  multiValueLabel: (styles, { data }) => ({
    ...styles,
    color: data.color,
  }),
  multiValueRemove: (styles, { data }) => ({
    ...styles,
    color: data.color,
    ':hover': {
      backgroundColor: data.color,
      color: 'white',
    },
  }),
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    defaultValue={[colourOptions[0], colourOptions[1]]}
    isMulti
    options={colourOptions}
    styles={colourStyles}
  />
);

I reduce the width of the select but I noticed the width of the dropdown is not reduced... I would like to reduce it too but I don't know how can I do to do this ...

Here is my code :

https://codesandbox.io/s/codesandboxer-example-forked-6417p?file=/example.js

This is a picture of what I would like to have :

I mean I want the width of only the black area.

Could you help me to do this ?

Thank you very much !

Does this answer your question? [React Select auto size width](https://stackoverflow.com/questions/46571811/react-select-auto-size-width) — 0stone0, Nov 26 '20 at 21:52
No, I don't want to change the width of the select but of the options — Peter, Nov 26 '20 at 22:03

score 0 · Accepted Answer · answered Nov 26 '20 at 22:25

You can do that by overriding width of the menu in the following way:

const colourStyles = {
   control: styles => ({ ...styles, backgroundColor: 'white', width: '300px'}),
   // your other code goes here
   menu: (provided) => ({
       ...provided,
       width: '300px' // specify width you need here 
   })
}

How can I reduce the width of the dropdown of the select?

1 Answers1