Dropdown menu in Bootstrap gets cropped behind a scrollable container

I am encountering a problem with my Bootstrap Drop Down. The dropdown is located within a scrollable div with a fixed height.

Whenever I click on the dropdown, the menu appears behind the scroll content. However, a normal select works perfectly fine.

https://i.sstatic.net/6jL1B.png

Take a look at this Fiddle to see the issue in action.

I have attempted to solve this by applying position: fixed to the .dropdown-menu class, but it has not been effective.

Is there a solution to this problem that does not involve using JQuery?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

When the drop-down has CSS position: absolute and is positioned under a container with CSS position: relative, finding a solution can be challenging, although not impossible, using z-index.

An easier solution would involve using position: fixed along with accurate calculations of its parent's top offset value.

$('.btn-group .dropdown-toggle').click(function(){
    var topPos = $(this).offset().top + $(this).outerHeight();
    $(this).siblings('.dropdown-menu').css({'position':'fixed', 'top':topPos, 'left':'auto'});
})

Check out the modified version on JSFiddle.

Another Solution - (If HTML source can be edited)

The simplest approach would be to modify the source HTML as shown below

<select class="form-control">
    <option selected>Default</option>
    <option>1</option>
    <option>2</option>
</select>

View this example on this location

Answer №2

Hello there! As my colleague Samir Bhosle suggested how to use the select element, I have a question about styling the options that are not responding to Bootstrap. I made some modifications which could be helpful for you, so feel free to take a look at this fiddle: fiddle

    <select type="button" class="btn btn-default">
       <option class="text-success">1</option>
       <option class="text-danger">2</option>
       <option class="text-primary">3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
     </select><br>

These changes worked perfectly in my case!

Answer №3

You currently have a bootstrap dropdown in use. However, what you actually need is a bootstrap select.

<div class="form-group">
  <select class="form-control" id="xyz">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

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

Trouble Viewing Images on Website

I am currently dealing with a critical issue in my project. I am using the MVC model and have my CSS stylesheet located in the view folder. In this stylesheet, I have included the following code for the body element: body{ margin-left:250px; backg ...

phphtmlcss

In Bootstrap 5, the anchor tag is causing a shift in the background color of surrounding tags upon being clicked

Why does clicking on an anchor tag temporarily change the background of other tags that weren't clicked? What am I doing wrong? https://i.stack.imgur.com/ZKlUT.png Check out the code below: <nav class="navbar navbar-expand-lg navbar-light bg- ...

htmlcssbootstrap-5

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

cssreactjssafariresponsive-designmedia-queries

Searching for a client-side element within an update panel using code-behind: A step-by-step guide

While working on a user control in asp.net, I encountered a significant challenge in locating the client side HTML element positioned within an update panel. The .ascx file contains the following code snippet: <asp:UpdatePanel ID="UpdatePanel1" runat= ...

c#javascripthtmlasp.netajax

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...

htmlobjective-ciosprintingxcode4

Is It Possible for an HTML Page to Load Within an iframe?

Recently, I embedded an iframe link from a game hosted on Scirra onto my website. However, I noticed that the page automatically scrolls down to where the iframe is positioned once opened, which is quite annoying. Does anyone know how to resolve this iss ...

htmlcssiframeposition

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Seeking assistance to enhance the display of museum information when a museum name is selected from an option dropdown box. The data is extracted from a json array. Although I managed to populate the option box with the museum names, I am encountering di ...

javascriptjqueryhtmljson

Experiencing difficulties in arranging Bootstrap columns based on media queries

I am creating a layout for a website that requires 4 columns. When the screen is in desktop mode or wider than tablet width, it should show all 4 columns with the outer 2 being used for padding only. However, in mobile mode, the outer 2 columns should di ...

cssbootstrap-4media-queriesxhtml

Steps for creating a horizontal card design

Looking to achieve a card style similar to this: http://prntscr.com/p6svjf How can I create this design to ensure it remains responsive? <div class="recent-work"> <img src="work/mercedes.png"> <h3>Modern website concept</h3&g ...

htmlcss

Struggling to effectively align the footer div in a responsive design

Check out this GitHub link to access the HTML file and CSS: https://github.com/xenophenes/pgopen-splash2016 I'm facing an issue with the footer text alignment. Despite my efforts, I can't seem to center it properly as it keeps appearing slightly ...

htmlcss

Unable to open links specified in 'href' with Bootstrap 5 Navbar

After finishing developing my first page, I encountered an issue while working on the second page. I am using a bootstrap 5 navigation bar. The way I have set up the navbar is that once it reaches a breaking point, I disable the view to allow the full bar ...

htmlbootstrap-5

Accurate understanding of URL parameters and hashtags

Imagine an HTML document containing two blocks, where the content of only one block can be displayed at a time by toggling between them using menu buttons and/or URL parameters with the same JavaScript functions provided below: <div class="block1&q ...

javascripthtmlhashtag

Struggling to get the nth-child selector to function properly in IE8

Looking for a solution to alternate colors in a table? Here's what I tried: #grid tr:nth-child(odd) { background-color:#eee; } #grid tr:nth-child(even) { background-color:#fff; } Unfortunately, this works in Firefox but not in IE8. After some i ...

cssinternet-explorer-8css-selectors

Creating a changing text color using Material UI and React

How can one dynamically set the text color based on the background color of a component using Material-UI API? If component A has a light background, then the text should be dark. For component B with a black background, the text should be light. (I have ...

cssreactjsmaterial-ui

Django was unable to load the static image

Currently, my Django application is hosted on PythonAnywhere. In order to generate a PDF, I am utilizing WeasyPrint which includes an image that should be displayed in the PDF. However, within the error log, I am encountering the message "Failed to load im ...

htmldjangodjango-staticfilespythonanywhere

How can I incorporate classes from multiple CSS files into my WordPress theme?

Currently, I am utilizing wp_enqueue_style to incorporate two CSS files within a single function. However, the issue that arises is when I try to apply a class, it seems that only classes from one of the files can be utilized and it ends up overriding anot ...

csswordpresswordpress-themingbootstrap-5

Struggling to retrieve Codemirror textarea values across multiple elements with JavaScript/jQuery

I've been struggling to retrieve the values from my textarea codemirror in order to send them as JSON to the server for saving after editing. Unfortunately, I am unable to select the ELEMENT...I even attempted to grab the element by its id...with no s ...

javascriptjqueryhtmlcodemirror

Removing page scrolling in Bootstrap 5: A step-by-step guide

I would like to ensure that only the card-body block is scrollable. Currently, the page does a bit of scrolling when the card-body block overflows (resulting in 2 scroll bars). The lorem text was added as an example of an overflow. The desired outcome is d ...

htmlcssbootstrap-5

Missing CSS in dynamically loaded content on IE

I have been searching everywhere, but I just can't seem to find a satisfactory answer to this particular question. Whenever I load a few items on the page, they are displayed correctly at first. However, if a user decides to change the language, the ...

htmlcssajaxinternet-explorerdynamic

What is the process for submitting a form to a PHP page?

Could you assist me in posting a form with two fields on a php page using $_POST['json']; where the object will be of json type? <div id="result"></div> <form name="form" id="form" method="post" > Name: <input type="text ...

phpjqueryjsonposthtml