Adding a scrollbar to a React Bootstrap DropDown

I am utilizing the react bootstrap dropdown feature, which can be found on this website

Currently, I am facing an issue where my dropdown list overflows vertically when there are many items, making it unresponsive. Here is a picture showing the problem: https://i.sstatic.net/PACrq.jpg I have been trying to add a scroll bar to the list but haven't succeeded. Any assistance would be appreciated.

This is the code snippet I am working with

            <DropdownButton
                id="dropdown-basic-button"
                title={this.props.passenger.seatNumber}
                onSelect={(evt) => this.handleSeatSelection(evt)}
                variant="info"
              >
                {this.state.availableSeatNumbers.map((seatNumber) => (
                  <Dropdown.Item key={seatNumber} eventKey={seatNumber}>
                    {seatNumber}
                  </Dropdown.Item>
                ))}
              </DropdownButton>
cssreactjsbootstrap-4react-bootstrap

Answer №1

To create a scrollable dropdown menu, assign a specific height to the class and apply an overflow-y property with a value of scroll like so:

.dropdown-menu {
  height: 300px;
  overflow-y: scroll;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating responsive containers in Bootstrap 4 by adjusting sizes based on screen width and height

I've been scratching my head trying to crack this code. My goal is for the container size to always adjust based on the screen size. I attempted setting the height using min-height and max-height, however, it's not perfectly aligned with the scre ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to pass the image source as a prop to a child component in React?

I have created a reusable component that includes a title, image, and onPress function. However, the image is not being rendered or displayed properly. Can someone please advise me on how to pass the image source dynamically? Is there a method to reference ...

androidreactjsreact-native

Ways to display additional text with a "Read More" link after three lines of content without relying on a

I am currently working on an application where I need to display text in a limited space of 3 lines. If the text exceeds this limit, I want to show either "Read More" or "Hide". Below is the code snippet that I am using for this functionality. class Cust ...

javascriptreactjsreact-native

Attempting to modify the state within a nested object located in an array by using json data

My objective is to retrieve data from the Google Books API, which returns JSON data in a similar format to what my state displays. I aim to update the title with the title string provided by the JSON data. Currently, I am encountering a "failed to compile" ...

javascriptjsonreactjsfetch

Managing a prolonged press event in a React web application

Hello everyone! I am currently using React along with the Material UI library. I have a requirement to handle click events and long-press events separately. I suspect that the issue might be related to asynchronous state setting, but as of now, I am unsu ...

javascriptreactjswebmaterial-uilong-press

allowing the bootstrap accordion to expand only upon clicking the arrow

I'm currently using Bootstrap 5 to style my website, and I'm curious if there's a way to make the accordion only expand when the arrow on the right side is clicked. The default behavior expands the entire button, but I'd like to change ...

cssbootstrap-5

Populating Redux form fields with data retrieved from API call

Currently, I am working on an address finder component in React and I am looking for the most effective way to update the fields with values once I receive the data from the API. I am using a fetch in React to fetch the data and fill in some form fields, t ...

javascriptreactjsreduxreact-reduxredux-form

Guide to centering a list on a webpage using Bootstrap 3

Looking to create a centered list using the latest version of Bootstrap 3. Any tips? The desired list should be positioned in the middle of the page. ___________________________________________ | | | ...

htmlcsstwitter-bootstrap

Deploy a web application using Docker containers for both the frontend and backend components

In the midst of working on a project that involves React.js for the front end and Golang for the backend, my folder structure is set up as seen in this image. Additionally, my docker-compose.yml file can be found here. Everything is running smoothly loca ...

reactjsdockergodocker-composedockerfile

Jquery div mysteriously disappearing without explanation

I need some help with my image options. Whenever I hover over the image, the options appear below it. However, when I try to move down to select an option, they disappear. I have configured the slideUp function so that it only happens when the user moves a ...

jquerycssjquery-selectors

The button is unresponsive. Which code do I need to implement?

Hello there, I am still learning so please bear with me as I ask this question about my website. I have a Get Started button with a transparent background. When the user clicks on the button, I want the background to disappear. What code do I need to inse ...

jqueryhtmlcss

Preserve the selected Material UI Tab in ReactJS even after refreshing the page

Hey there, I've been using React Material UI Tab and ran into an issue where the tab selection is lost on page refresh. Does anyone know how to fix this problem? This pertains to a code snippet for the material ui tab component. class SimpleTabs exte ...

reactjstabsmaterial-ui

Should input fields be placed inside separate columns or share a column in Bootstrap to keep them together while being right justified?

When using Bootstrap, is it better to place separate input fields inside their own col or share a col to keep them together and right-justified? I have a combo and input that I want to display on the same row at the right-hand side of the screen. If I put ...

htmlcssbootstrap-5

Utilizing the Ternary Operator for conditional rendering in React is causing issues with HTML elements

Why does React display the "signin" div when the user is not true, but displays the children of the "user-profile" div inside the "signin" div when the user is true? I have tried multiple solutions to fix this issue, but it persists. If anyone knows how t ...

javascripthtmlreactjsnext.js

modify the array within an object located inside a different array

This is my Redux reducer code snippet: let initialState = [ { name: 'john', messages: [{ message: "hi" }] }, { name: 'max', messages: [{ message: "howdy" }] }, { name: 'alex', messages: [{ message: &q ...

reactjsreduxreact-redux

Make sure a div is displayed on top of any content currently in fullscreen mode

I recently encountered an issue with my Chrome extension where a menu I inserted into the page would disappear whenever a flash or html5 video player went full screen. Is it possible to have two objects in full screen simultaneously, or is there another so ...

javascriptjqueryhtmlcssgoogle-chrome

Adjust the navigation text and logo color as you scroll on the page

I am new to HTML and CSS and I am working on a website with PagePiling.js scrolling feature. I want to change the color of my logo image and navigation text dynamically as I scroll to the next section. Specifically, I only want the part of the logo and tex ...

javascriptjqueryhtmlcsspagepiling.js

Using ES5 in conjunction with material-ui for creating UI components

On the official website, it explains how to import the Module into a project: import { Link } from 'react-router-dom' import Button from '@material-ui/core/Button'; <Button component={Link} to="/open-collective"> ...

reactjsmaterial-ui

Attempting to assign a value to the Progress Circle

Can I modify the code to incorporate a hardcoded number instead of displaying "Goals completed:" and still have the progress bar reflect the percentage? I want to hide the prompt for users to input a number and handle all updates behind the scenes. Essent ...

javascripthtmlcssprogress-bar

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

I am attempting to incorporate a bootstrap template into Angular. The template requires some external JavaScript and CSS files that need to be linked. I have placed these files in the assets folder and referenced them in the styles and scripts arrays of an ...

jquerycssangularbootstrap-4external-js