Using React Bootstrap Dropdown setting a maximum height

Viewed 236

I'm using the react bootstrap dropdown code. I have the following code

<Dropdown className="MentorList_Dropdown">
    <Dropdown.Toggle className="MentorList_DropdownToggle" id="MentorList_DropDown">
       Categories
    </Dropdown.Toggle>

    <Dropdown.Menu className="MentorList_DropdownMenu">
         <Dropdown.Item className="MentorList_DropdownItem" onClick={(ev) => this.handleCategorySelect(ev, 0)}>All</Dropdown.Item>
             {categoriesDropItems}
   </Dropdown.Menu>
</Dropdown>

The list is too long. How can I make the dropdown scroll instead and give it a maximum height?

I tried the following

.MentorList_Dropdown {
  max-height: 300px;
  overflow-y: scroll;
} 

But the dropdown disappears.

1 Answers

Use height instead of max-height.

.MentorList_Dropdown {
  height: 300px;
  overflow-y: scroll;
} 
Related