Prevent expands 'React-select' when click on it

user_9974904 0
Viewed 2896

I'm using the react-select library https://react-select.com/home#getting-started. Trying to reduce select to dimensions width: 90px; height: 23px. However, when you click on it, select increases. How to set the above parameters so that select has a cay time of width: 90px; height: 23px?

Demo here: https://stackblitz.com/edit/react-sk7g4x

import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <Select options={options} />
    );
  }
}

CSS

.css-2b097c-container {
  width: 90px;
  height: 23px;
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
}

.css-1pahdxg-control {
  min-height: 23px;
}

.select__control--is-focused {
  min-height: 23px;
}

.css-tu25sd-control {
  height: 23px;
}

.selectSort .css-aohzbe-control {
  height: 23px;
}

.selectSort .css-1hwfws3 {
  padding: 0;
}

.css-tlfecz-indicatorContainer {
  padding: 0;
}

.css-yk16xz-control {
  height: 23px;
}
react-select reactjs css javascript
2 Answers

Try using the props classNamePrefix. If you don't use this, react-select creates dynamic prefix names such as css-tu25sd-c.. They aren't reliable.

<Select options={options} classNamePrefix='my-className-prefix' />

For more props info see: https://github.com/JedWatson/react-select#props Edited solution. Try use the classNamePrefix props, update your css to match the dynamic css classes and run in your editor. 

h1, p {
  font-family: Lato;
}

.css-2b097c-container {
  width: 90px;
} 

.my-className-prefix-container,
.my-className-prefix__control {
  width: 90px !important;
  height: 3px !important;
}

.my-className-prefix__value-container,
.my-className-prefix__indicator-separator,
.my-className-prefix__dropdown-indicator {
  position: relative;
  bottom: 8px;
}

.my-className-prefix__control--is-focused {
  height: 23px;
}

.select__control--is-focused,
.css-1pahdxg-control {
  min-height: 23px;
}

.my-className-prefix__placeholder,
.my-className-prefix__value-container,
.my-className-prefix__menu {
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
  max-height: 23px;
}
user_100081800

Do you intend to limit the height to 23px? I checked your stackblitz project, and find that the inner div's height is bigger than 23px. React-select provide some customization optionswe can use. Please check my forked version: https://stackblitz.com/edit/react-pmbsvv to verify if it is something you need.

The following code is just a copy of the index.js file:

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const customStyles = {
  control: (provided, state) => ({
    ...provided,
    height: 23,
    width: 90,
    minHeight: 23
  }),
  valueContainer: (provided, state) => ({
    ...provided,
    paddingTop: 0
  }),
  dropdownIndicator: (provided, state) => ({
    ...provided,
    height: 20,
    paddingTop: 0
  })
};
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Select
        options={options}
        styles={customStyles}
        classNamePrefix="my-className-prefix"
      />
    );
  }
}

render(<App />, document.getElementById("root"));
user_36627480
Related