CODEWITHSUNDEEP
reactjs
Yash
Yash

Reputation: 11

When using React Select with Menu Item, the menu is rendering horizontally rather than vertically how can I fix this?

I am trying to make a dropdown menu in React and have used Select and Menu Item. However, the options in the drop down menu are rendering horizontally rather than vertically. I am not sure how to fix this and have attached my code below.

<div style = {{ display: 'flex', width: '500px', margin: '20px' }}>
            <div style = {{ flex: '150px', left: "79px" }}>             
              <Select 
                id = "status-menu"
                onChange={handleStatusClick}
              >
                <MenuItem value={"Awaiting Utility"}>Awaiting Utility</MenuItem>
                <MenuItem value={"Terminated"}>Terminated</MenuItem>
                <MenuItem value={"Denied"}>Denied</MenuItem>
                <MenuItem value={"Completed"}>Completed</MenuItem>
                <MenuItem value={"Approved"}>Approved</MenuItem>
                <MenuItem value={"Awaiting AccessH2O"}>Awaiting AccessH2O</MenuItem>
              </Select>
              <h4 style = {{ fontWeight: 'normal', backgroundColor: setStatusColor(dummyData.status), width: '85%', textAlign: 'center', borderRadius: '8px' }}>{status}</h4>
            </div>
            <div style = {{ flex: '100px' }}>
              <h4 style = {{ fontWeight: 'normal' }}>{dummyData.accountId}</h4>
            </div>
            <div style = {{ flex: '100px' }}>
              <h4 style = {{ fontWeight: 'normal' }}>{dummyData.propertyAddress}</h4>
            </div>
          </div>

Upvotes: 0

Views: 1340

Answers (2)

Anupam
Anupam

Reputation: 538

Got into a similar issues while using react-dropdown.

What worked for me was just removing display: flex from the CSS file

Upvotes: 0

adsy
adsy

Reputation: 11372

Try adding style = {{ display: 'flex', flexDirection: 'column' }} to your <Select> component.

Upvotes: 1

Related Questions