Creating a Scrollbar within a Bootstrap Dropdown: a Complete Guide

Is there a way to create a scrollbar within a bootstrap 4 dropdown selection? I am facing an issue where the dropdown does not fully load when there are too many files. My solution is to display only 5 files when the dropdown is clicked and include a scrollbar for navigation.

https://i.sstatic.net/FVrBb.jpg

HTML

<div class="pd-ltr-20 customscroll customscroll-10-p height-auto xs-pd-20-10">
    <div class="min-height-200px">
        <div class="mb-30">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <small class="form-text text-muted">Select ES Value</small>
                        <div class="custom-file">
                            <select class="font-14 selectpicker form-control" data-width="100%">
                                <option value="">- ES VALUE -</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
htmlcssdrop-down-menubootstrap-4

Answer №1

Set a specific height for the <select> element, and then include overflow:auto to enable scrolling within the element.

Answer №2

Provide the <option> tag with height and overflow attributes.

option{
  height: 50px;
  overflow: auto;
}
<select>
  <option value="">- ES VALUE -</option>
  <option value="">- 1 -</option>
  <option value="">- 2 -</option>
  <option value="">- 3 -</option>
  <option value="">- 4 -</option>
  <option value="">- 5 -</option>
  <option value="">- 6 -</option>
  <option value="">- 7 -</option>
  <option value="">- 8 -</option>               
  <option value="">- 9 -</option>               
  <option value="">- 10 -</option>               
  <option value="">- 11 -</option> 
  <option value="">- 12 -</option>
  <option value="">- 13 -</option>
  <option value="">- 14 -</option>
  <option value="">- 15 -</option>
  <option value="">- 16 -</option>
  <option value="">- 17 -</option>
  <option value="">- 18 -</option>
  <option value="">- 19 -</option>
  <option value="">- 20 -</option>
  <option value="">- 21 -</option>
  <option value="">- 22 -</option>
  <option value="">- 23 -</option>
  <option value="">- 24 -</option>
  <option value="">- 25 -</option>
</select>

Answer №3

Looks like the Bootstrap 4 Selectpicker plugin is being used here. The dropdown is automatically sized to fit the viewport height. To customize this, you can add a custom class to the select element (mh) and then set the max-height using the !important rule.

/* setting a custom max height */
.mh .dropdown-menu {
    max-height: 100px;
}

<select class="selectpicker mh" data-live-search="true">
     <option data-tokens="">Custom max height using CSS</option>
     <option">More...</option>
     <option">More...</option>
     <option">More...</option>
     <option">More...</option>
</select>

Check out the live demo here

Answer №4

When working with Boostrap 3, I typically implement the following css style:

ul.dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

Answer №5

To contain your list, enclose it in a DIV tag and apply the following styles: set the overflow property to auto and provide a fixed height for the DIV.

<select name='menu' class="myDropDown">
  <option value='1'>first item</option>
  <option value='2'>second item</option>
  <option value='3'>third item</option>
  <option value='4'>fourth item</option>
  <option value='5'>fifth item</option>
  <option>........
  <option>........
  //I have many options.....
</select>

<style>
.myDropDown
{
   height: 50px;
   overflow: auto;
}
</style>

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

Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this const Root = styled.div` display: flex; flex-direction: row; margin: 0 auto; width: 100%; position: relative; @media (min-width: ${(p) => p.theme.screen.md}) { width: ${(p) => p.theme.screen.md ...

cssreactjsmaterial-ui

The span is unresponsive

When focusing on an input or checking its validity, the span should move up but it's not responding to any styles. <div class="login"> <span class="logtxt">Username or email</span> <input type=& ...

htmlcss

Tips for implementing a jQuery plugin on specific elements within an HTML page

I've been experimenting with the jQuery extension for searchable dropdowns available at this link. While I am impressed with its functionality, I'm looking to apply it selectively to specific elements on my webpage rather than all of them. Is the ...

javascriptjqueryhtmlselect

Utilizing a TypeScript Variable as a Tagname in an HTML File within Angular

This specific problem is originally documented in this post. Despite being flagged as a duplicate, my scenario differs because the HTML content at hand is too extensive for utilizing innerHTML. The structure of my component's HTML file is as follows: ...

htmlangulartypescript

Exploring the utilization of server-side Web Sockets functionality

Recently, I've been diving into the world of Web Sockets and I'm eager to understand how server-side implementation works. While I feel comfortable with writing client-side code using onmessage() in HTML5, JavaScript, etc., I find myself unsure a ...

htmlwebsocketnpm

Nested divs with overlapping background images

How can I incorporate background images in nested divs? <div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10"> This particular div displays a grey-colored background imag ...

phphtmlcss

Rotating a CSS div causes the page to scroll horizontally

Currently, I am working on creating a unique design for the footer of my website. However, when implementing it, I encountered an issue that is causing a horizontal scroll (red background added for clarity). https://i.sstatic.net/K4vnV.jpg To address thi ...

htmlcssrotationcss-transformshorizontal-scrolling

The tabs are visible in the drawer, but the transition is not occurring

I am a beginner when it comes to using material ui. After clicking on advanced sports search, a drawer pops up. I have been trying to incorporate tabs in the drawer, but every time I click on tab two, the drawer closes. In reality, it should switch between ...

javascripthtmlreactjsreduxmaterial-ui

What's the best way to ensure that a select and button have consistent heights in Bootstrap 5?

Can I make a button and select element in the same row with Bootstrap 5 have the same height? https://i.sstatic.net/3S13Q.png <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

csstwitter-bootstrapbootstrap-5

Tips for showcasing a lineup horizontally with HTML and CSS

I'm currently working on creating a menu using HTML. I've included my links in an unordered list (ul) as shown below. In my CSS, I added a display:inline; property to the links to make them appear side by side like a menu. However, for some reaso ...

htmlcss

Utilizing jQuery AJAX to efficiently handle branching based on the result received

I've successfully set up my first AJAX call with jQuery. The only thing left to do is to check the result from the PHP page for any database errors and display an error message if necessary. Here's the current Javascript code: <script type=" ...

javascriptphpjqueryhtmlajax

Selecting multiple objects in FabricJS on mouse click

Can anyone provide suggestions on how to select multiple objects on a canvas with a mouse click? I only want to select objects that overlay the point. From my understanding, the target of the mouse event is always the top-most object. I have tried binding ...

javascripthtmlcanvasfabricjs

Using HTML or JavaScript to generate a multitude of identical HTML elements on a webpage

I am currently designing a page that requires the presence of numerous tree illustrations with leaves, spanning across the width at the bottom of the page. I have considered two methods to achieve this. One option is to create a single set of trees and lea ...

javascriptjqueryhtmlcssdom

``Need help hosting static HTML files on Google App Engine? Here's a step-by-step

Can I use App Engine to host a static HTML website? How can I set up my domain name to work with it? ...

htmlgoogle-app-engineweb-applicationshosting

Is there a problem with Chrome's display?

I'm currently using Chrome version 53.0.2785.143 and have noticed a rendering issue that tends to occur more frequently within my application when utilizing CSS transform scale. Feel free to check out this JSFiddle link which demonstrates the problem ...

htmlcssgoogle-chrome

Creating a Bootstrap layout with columns of varying heights

My current setup looks like this: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content&l ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Arranging XML information in PHP from most recent to oldest

I have a working code that I want to modify so that the Observed Data is displayed from the newest date to the oldest. How can I flip only the Observed Data? Here is my current code: <?php $url = "http://r7j8v4x4.map2.ssl.hwcdn.net/NOD_R.xml"; $xml = ...

phphtmlxmlxml-parsing

What causes the difference in behavior between absolute positioning in <button> and <div>?

I am noticing that the code below is not positioning my span to the top-left corner of the button as I expected. Can anyone explain why? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> &l ...

htmlcsscss-position

Can someone point out the mistakes in my CSS Layout?

I've been struggling to make progress on this task over the past couple of days, encountering roadblocks with no clear solution in sight. The maze of nested divs I'm navigating through might be playing tricks on my mind, so having a fresh pair of ...

htmlcss

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Can someone assist me in changing the button color to red after it has been clicked? I am looking for guidance on how to achieve this. The current code snippet is as follows: <td> <button mat-icon-button color="primary"> <m ...

htmlangularangular6