The issue with border radius property on the scrollbar of a bootstrap dropdown menu

Is the scroll bar of a bootstrap dropdown menu sticking out of the box when using the border radius property? Looking for a solution?

Check out this example code and preview:

<div class="container py-4">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="#">Item</a></li>
           
            (more list items here)
            
            <li class="dropdown-item"><a href="#">Item</a></li>
        </ul>
    </div>
</div>
.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
    border-radius:30px;
}

Answer №1

Integrate an additional outer container with rounded corners, hidden overflow, and a visible scrollbar on the inner container. To activate the dropdown menu, transfer the dropdown-menu class to the outer container while retaining the ul element. Make necessary style modifications to restore the original appearance (eliminate excess padding/margin using utility classes and include border-radius: 30px !important to counter Bootstrap's override behavior during toggling):

solution inspired by: Apply Border-Radius To Scrollbars with CSS

.dropdown-menu {
  border-radius: 30px !important;
  overflow: hidden;
}

.dropdown-menu-scrollbar {
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: scroll;
}
<div class="container py-4">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown <span class="caret"></span></button>
    <div class="dropdown-menu">
      <ul class="ps-0 dropdown-menu-scrollbar">
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
        <li class="dropdown-item"><a href="#">Item</a></li>
      </ul>
    </div>
  </div>
</div>


<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffae1fde1fc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bca0bd">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

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

Enhance the appearance of the navbar on mobile devices by customizing the styling in Bootstrap 5

Hi everyone, this is my first time posting a question here so please be gentle :) I recently implemented a script to change the CSS of my navbar when scrolling. window.addEventListener("scroll", function () { let header = document.querySelector(".navbar") ...

Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup: In the ...

Increase the height and width of the inner divs to match the outer div while reducing the number of inner divs

Within my HTML structure, I have three vertical divs that each contain multiple inner div elements. I am looking to achieve a responsive layout where the inner divs wrap into either a 2-column or 1-column grid based on the browser's height and width. ...

Ways to reset a JQuery/JavaScript filter

I am currently working on a list of div items that are being filtered and sorted using JavaScript. Each item animates as it enters the screen, scaling up to its final size. However, when I apply filters using buttons, items that are already displayed do n ...

tips for expanding the size of your images

Hey there, I'm looking for some help with the code below. I need to increase the width of the images and remove the border of the slider div which is currently showing a white border that I want to get rid of. I am using JavaScript to display the imag ...

Generate a new div element dynamicaly after every 10 elements are added

I am facing the following scenario: I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item. Although I have successfully added all the checkboxes to a single div element, I ...

Ways to create space between the columns in a bootstrap carousel with multiple items and the previous and next buttons

I'm currently utilizing Bootstrap 4 and have created a multiple item carousel as shown in the image below: https://i.sstatic.net/NbO7u.png While the carousel is functioning properly, I'm facing the issue of not being able to add spacing between ...

What is the best way to conceal just the scrollbar thumb in a Bootstrap modal?

When opening a modal in Bootstrap according to the documentation, it only hides the scrollbar thumb, like shown in the examples below: However, my modal hides the entire scrollbar. How can I modify it to hide only the scrollbar thumb? body { height: ...

What could be the reason for my flex items not shrinking when the browser window size is decreased?

Here is the CSS code for the header component using flexbox: .header { display: flex; flex-direction: row; justify-content: space-between; padding: 15px 20px; background-color: #ffffff; position: sticky; top: 0; z-index: ...

Stopping autoplay in Swiper as soon as you hover over it

My swiper is set to autoplay, but I want it to stop immediately when hovered over instead of waiting for the transition to finish. Is there a way to interrupt the transition and stop it at the exact point where the cursor hovers? Here is my Swiper config ...

Implement a CSS class specifically for products with low stock within the single product page on WooCommerce

I need some assistance with adding a class to 'Low stock' in the code snippet below, as I am not very familiar with php. My goal is to style the Low Stock text in WooCommerce to appear orange using CSS. function change_stock_text( $availability ...

Attach the footer to the bottom of the screen only if the main page text is limited in length

How can I ensure that my footer sticks to the bottom of the screen only when there is minimal content on the page? When there is a lot of content, I'd like the footer to appear after the content rather than being pinned at the bottom, especially since ...

Shifting hues with every upward and downward movement

I am experiencing a small issue with this JS code... -I have multiple divs that are changing automatically in rows as they move randomly... I want to change the color of the div moving up to green. And for the div moving down, I want to change the colo ...

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

Personalized style for text overflow property

The application is created using Angular. Within a component, we have a div containing some text: <div>abcdefghijklmnop<div> Depending on the screen size, the text should either be fully displayed or clipped. I discovered the property 'te ...

Issue with rgba background color not working in Bootstrap 3 navbar

Attempting to change the background color of bootstrap's navigation bar to a lower opacity rgba one, but facing difficulties. There are no changes being reflected at all. Below is the custom navbar CSS: .navbar-custom { background-color: rgba(255 ...

Inconsistent behavior of transform scale() between Chrome and Safari upon page refresh

My goal was to design a code that would adjust all content according to the browser size, ensuring that everything remains visible even when the window is resized. var docHeight = $(document).height(); var winHeight; var zoomRatio; function z(number) { ...

Tailored design - Personalize interlocking elements

I am currently working on a custom theme and I am trying to adjust the font size of Menu items. In order to achieve this, I have identified the following elements in the tree: ul (MuiMenu-list) MuiListItem-root MuiListItemText-root If I want to modify th ...

Styling your Vuetify V-data-table with CSS

Struggling to add extra spacing between table rows, despite inspecting the page and verifying that my styles are not being overridden. Have read other Vuetify posts on applying CSS but still no luck. Any suggestions for why I can't style my table as d ...

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...