Search code examples
reactjsdropdown

Dropdown increasing its size after selecting options (React)

How can i make the dropdown fixed i.e., after selecting options , the dropdown is increasing its size if the option length is big. I dont want it to increase because it is disturbing other components which are beside it.

Ive my code like this: 

dropdown:{
     marginTop: 17,
     maxWidth: '120%'

     },

<Typography variant="h3" component="h3" style={{  marginBottom: 10}} gutterBottom>
           Region
      <div className={classes.dropdown}>
      <Dropdown
                options={this.state.regionList}

                onChange={this.handleRegionChange}
       />
      </div>
     </Typography>
Solution

  • Please use both width and maxWidth. for example:

    dropdown:{
   marginTop: 17,
   maxWidth: '200px'
   width: '200px'
},