How to fix width of Search box in react-select dropdown component?

user_3831694 0
Viewed 17775

I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.

Please see below image. How can i fix the search textbox width to react-select width?

enter image description here

react-select reactjs
6 Answers

I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works

  <Select

      value={this.state.passwordExpire}
      onChange={this.updatepasswordExpire.bind(this)}
      options={optionsDays}
      style={{width: '82%'}}  
 />
user_45463640 
 const customStyles={
      // control represent the select component
        control: (provided)=>({
          ...provided,
          width:'100px'
       })
     }
    <Select
      options={options}
      styles={customStyles}
    ></Select>

This method is stated in react-select documentation. You can adjust select width as per your wish.

user_177244350 
.Select-control {
    table-layout: fixed;
}

.Select-input {
    overflow: hidden;
    max-width: 100%;
}

Here is the Solution..

user_36553210 
.Select-input > input {
    width: 100% !important;
}

.Select--multi .Select-input {
    display: block !important;
}

.Select--multi .Select-multi-value-wrapper {
    display: block !important;
}

This is the proper solution in this case. It's working fine.

user_115094990
Related