Changing height of react-select component

Question

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

Jivan · Accepted Answer · 2020-03-31T00:59:00.460

90

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',
    }),
  };

edited Mar 31 '20 at 00:59

answered Mar 29 '20 at 10:20

Jivan

1,263
1
10
10

What is ...provided? – Kelvijn Jul 02 '20 at 15:43
3

Provided are the provided styles from `react-select`, if you don't spread them you wouldn't get the default styles for other properties. – Eduardo Portet Nov 29 '20 at 21:35
Good stuff. Worked like charm. – Aravind Reddy May 28 '21 at 17:43
1

sadly, this disables the growing of the component when it's a Multi-select and there are multiple lines of selected items – Fre Timmerman Jul 28 '21 at 08:45
for input property I would add padding: '0px' as well – chenop Jan 17 '22 at 16:21
This seems unnecessarily complicated.. considering a different library or implementing the component myself. – User Dec 10 '22 at 09:16

Erez Lieberman · Answer 2 · 2019-01-16T13:58:38.227

41

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}
 />

edited Jan 16 '19 at 13:58

answered Jan 16 '19 at 13:52

Erez Lieberman

1,893
23
31

9

as you can see though, when you decrease the height of just the control to anything less than ~34px, it doesnt actually decrease the size of any other components. I need to, and i imagine original poster, needs to decrease the height of the control while keeping the value centered vertically, the "x" on the right side, etc. i want to decrease everything's height so it's less tall of a rectangle – Dan Nov 13 '19 at 23:19
11

How is this upvoted and accepted? It's literally the first thing anyone would think to try, and it doesn't work... – Slbox Apr 08 '20 at 21:04
It could have been more thoughtful if the component could respond to normal bootstrap form control classes for resizing etc. – geobudex Sep 30 '20 at 10:30
1

This is accepted probably because the demo shows it works. But, the demo is using version 2.2.0 which is HIGHLY outdated. The demo, however, is enough to fool the casual lurker. I agree that this answer should be removed as correct. – wynx Jan 26 '22 at 20:02

score 12 · Answer 3 · answered Dec 10 '20 at 19:53

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.

this + @erez-lieberman answer work perfect for heights less than 36px — Facundo Pedrazzini, Dec 15 '20 at 08:51

score 9 · Answer 4 · answered Jan 15 '20 at 21:57

9

CSS Way

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

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

answered Jan 15 '20 at 21:57

Sined Yuk

119
1
2

score 8 · Answer 5 · answered Dec 09 '20 at 12:23

8

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}/>

answered Dec 09 '20 at 12:23

ruwan800

1,567
17
21

2

This answer works best for me, except I prefer baseUnit to be 2: const customThemeFn = (theme) => ({ ...theme, spacing: { ...theme.spacing, controlHeight: 30, baseUnit: 2 } }) – Kevin Ashworth Dec 26 '20 at 21:12

score 4 · Answer 6 · answered Jul 26 '19 at 15:20

4

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;
    }

answered Jul 26 '19 at 15:20

Nova Qiu

107
3

While this css may help you with the height of the open dropdown, it doesn't change the height of the control, which is the topic of this SO. – Kevin Ashworth Dec 27 '20 at 16:26

score 2 · Answer 7 · answered Aug 02 '20 at 07:39

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;

    }
}

score 2 · Answer 8 · answered Mar 30 '22 at 16:47

2

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
  }),
};

answered Mar 30 '22 at 16:47

Brett DeWoody

59,771
29
135
184

score 0 · Answer 9 · answered Nov 28 '22 at 04:28

0

In my case, I had to just set the css height property for the class __value-container

Here is the code:

.react-select__value-container {
    height: 3rem;
}

answered Nov 28 '22 at 04:28

kartavya

1
1

score 0 · Answer 10 · answered Dec 11 '22 at 15:26

export const customStyles = {
  control: (provided: Record<string, unknown>, state: any) => ({
    ...provided,
    height: 42,
    boxShadow: 'none',
    borderColor: 'none',
    '&:hover': {
      color: '#60B3D1'
    },
    border: state.isFocused ? '1.5px solid #60B3D1' : '1.5px solid #cbd5e1'
  }),
  option: (styles: any, state: any) => ({
    ...styles,
    color: state.isSelected ? '#FFF' : styles.color,
    backgroundColor: state.isSelected ? '#60B3D1' : styles.color,
    borderBottom: '1px solid rgba(0, 0, 0, 0.125)',
    '&:hover': {
      color: '#FFF',
      backgroundColor: '#60B3D1'
    }
  }),
  input: (base: any) => ({
    ...base,
    'input:focus': {
      boxShadow: 'none',
      border: '1px solid #60B3D1'
    }
  }),
  menuPortal: (base: any) => ({ ...base, zIndex: 9999 })
}


<Select styles={customStyles } />

This really works well for me

Changing height of react-select component

10 Answers10

CSS Way

Linked