Simple way to set new height for all components?

[geoguide]

I want to change the height of react-select, but I'm having a hard time getting it to resize. When I get it to resize by forcing different parts of it, other parts of it such as indicators and clear buttons are misaligned. Is there no simple way to just pass in the height that you want it to be? Also I can't seem to get custom styles to work:

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

    input: (provided) => ({
      ...provided,
      margin: '0px',
    }),
    indicatorSeparator: () => ({
      display: 'none',
    }),
    indicatorsContainer: (provided) => ({
      ...provided,
      height: '32px',
    }),
  }
[...]
<Select
   styles={customStyles}
   ...
/>

Thanks!

[ebonow]

Greetings @geoguide

You would need to specify the height to the Control component and everything else should flex accordingly for larger sizes.

For smaller sizes, it gets a bit more complex.

• Control does have a minHeight the also needs to be adjusted
• Placeholder, SingleValue are both positioned with absolute so they would need to be sized accordingly
• ValueContainer and IndicatorsContainer both have padding that need to be addressed for smaller sizes
• Input obviously also has its own padding, margin and font size to contend with

I have a WIP with a ways to go, but thought to share so far:
https://codesandbox.io/s/react-select-heights-oyk8x?file=/src/App.js

[dylanzenner]

This is what I have been looking for thank you! Question though. On the smallest example why does the placeholder shift upwards when clicking on the box? In the other examples you have the placeholder stays in its corresponding position.

This really should be a feature which gets added