How to change the height of a dropdown menu?

Question

I'm hitting an API to get these data. I mapped the data to my select menu. I'm not able to change the height of the dropdown box . any idea on how it can be achieved?

react.js inside render

<div className={styles.nationality}>
         <label htmlFor="nationality">Nationality<span className={styles.star}>*</span></label><br/>
         {/* <img className={styles.nationalitydrop} src={drop} alt='drop' /> */}
         {['nationality'].map(key => (
           <select
           key={key}
           className={styles.nationalitybox}
           type="text"
           placeholder="select"
           menuPlacement="bottom"
           onChange={(event) => this.handleUserInput(event)}
           value={this.state.nationality}
           name='nationality'
           >  {this.props.nationalityData.map(({[key]:id}) => <option className={styles.data}key={id}>{id}</option>)}
             </select>
          ))}
         </div>

stylesheet

.nationalitybox
{
width: 408px;
height: 56px;
background: #30333F 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
color: #B4B6C4;
font-size: 20px;
border-style:none none solid;
outline: none;
}
 
.nationalitybox:placeholder-shown{
 font-size: 14px;
 color: #B4B6C4;
}

.data{
    background-color: #B4B6C4;
    color: black;
    width: 220px;
 }


[![dropdown][1]][1]

Check : https://stackoverflow.com/questions/68264388/height-of-the-select-option-box — Tushar Shahi, Jul 06 '21 at 05:45
please share a minimum reproducible code https://stackoverflow.com/help/minimal-reproducible-example — boxdox, Jul 06 '21 at 05:45

Sulman Ali · Accepted Answer · 2021-07-06T09:38:24.000

I think you are using wrong to style your select menu, you cannot use 'style.nationalitybox' because that not a class.

I suggest you use these options.

1st Option:

Change className={styles.nationalitybox} To className = "nationalitybox".

2nd Option:

If you are using Material UI then you have to use useStyles above the component. For example:

 const useStyles = makeStyles((theme) => ({
   nationalitybox: {
      height: "56px"
   }
 }));

const ComponentName = () => {
   const styles= useStyles();
}

How to change the height of a dropdown menu?

1 Answers1