'Changing height of react-select component

I am using the react-select component along with bootstrap v4

all of bootstraps stuff is based on 35px height it seems, the default height of the react-select component is 38px, which looks a little odd.

Any ideas how I can change the height of the component?

It is using some weird JS styling library I have never come across before. I have managed to get it to mimic the outline on focus using it, but the height escapes me, any help much appreceiated

You can play with it here

reactjs react-select

Solution 1:^[1]

You can add your styles to any part of the select components, take a look at the relevant docs

here is a working demo of what you ask for.

In your case the code that you need to add will look something like this:

const customStyles = {
  control: base => ({
    ...base,
    height: 35,
    minHeight: 35
  })
};

and in the select component:

<Select
          className="basic-single"
          classNamePrefix="select"
          defaultValue={colourOptions[0]}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={colourOptions}
          styles={customStyles}
 />

Solution 2:^[2]

Spending hours, I end up with this to get exact 30px height of react select with border 1px:

  const customStyles = {
    control: (provided, state) => ({
      ...provided,
      background: '#fff',
      borderColor: '#9e9e9e',
      minHeight: '30px',
      height: '30px',
      boxShadow: state.isFocused ? null : null,
    }),

    valueContainer: (provided, state) => ({
      ...provided,
      height: '30px',
      padding: '0 6px'
    }),

    input: (provided, state) => ({
      ...provided,
      margin: '0px',
    }),
    indicatorSeparator: state => ({
      display: 'none',
    }),
    indicatorsContainer: (provided, state) => ({
      ...provided,
      height: '30px',
    }),
  };

Solution 3:^[3]

The reason why you're not able to make it less than 36px is that the dropdownIndicator and indicatorContainer(clear icon is displayed) are taking 20px (icon) + 8px padding in all sides. If you reduce that padding, the minHeight will actually work.

dropdownIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),
clearIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),

You can play around with the padding of the dropdownIndicator and clearIndicator.

I noticed that you can't go under 30px in minHeight because of the valueContainer, unless you change its height/padding.

Solution 4:^[4]

I was barely able to make the Select component as small as 32px (in my browser) using the theme attribute. It works well when the height is greater than 45px. You can also omit the baseUnit attribute.

It didn't work for small sizes.

  const theme = (theme: Theme) => ({
    ...theme,
    spacing: {
      ...theme.spacing,
      controlHeight: 30,
      baseUnit: 0,
    }
  });

<Select options={props.options} theme={theme}/>

Solution 5:^[5]

CSS Way

You can specify classNamePrefix and use it to override CSS styles.

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Solution 6:^[6]

I was able to over write the menu-list's css style:

    /* over write css in react-select module */
    .Select__menu-list {
      max-height: 120px !important;
    }

Solution 7:^[7]

If you only want to resize the box use this.

.create-select {
    width: 160px;
    float: right;
    color: #000;
    [class$="ValueContainer"] {
        min-height: 28px !important;
        max-height: 28px;
    }
    [class$="IndicatorsContainer"] {
        min-height: 28px !important;
        max-height: 28px;
    }
    [class$="-Input"] {
        min-height: 28px !important;
        max-height: 28px;
        padding: 0px;
    }
    [class$="-control"] {
        min-height: 28px !important;
        max-height: 28px;

    }
}

Solution 8:^[8]

Cause

The .control has a min-height of 38px defined.

Fix

Change the min-height on the .control to your desired height.

const customStyles = {
  control: (provided, state) => ({
    ...provided,
    minHeight: '30px',
    ...additionalStyles
  }),
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Bassem
Solution 4	ruwan800
Solution 5	Sined Yuk
Solution 6	Nova Qiu
Solution 7	Efren Valdez
Solution 8	Brett DeWoody

'Changing height of react-select component

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]