The alignment of Bootstrap Select dropup with search results is off

I've encountered an alignment issue with bootstrap select live search (selectpicker). The dropup menu is misaligned when showing search results, but strangely, the alignment corrects itself after scrolling the page. Interestingly, this issue doesn't occur with the dropdown.

My setup includes bootstrap 1.14 beta 3 on bootstrap 5 for .Net 6 MVC.

For visual reference, here are some images:

  1. Dropdown list with Bootstrap Select
  2. Dropup misalignment during search
  3. Dropup aligns correctly after page scroll

I've only used the standard starter code from the bootstrap-select official docs, along with some custom styling.

Select tag

<select class="selectpicker form-control form-control-md"
        data-live-search = "true"
        asp-items = Model.CountryList>
</select>

Custom CSS

div.dropdown-menu.open {
   max-height: 250px !important;
   overflow: hidden;
   position: relative;
   height: auto
}

div.dropdown-menu.inner {
  max-height: 200px;
  overflow: auto;
}

Answer №1

Bootstrap selectpicker is not yet compatible with Bootstrap 5. I encountered a similar issue where the dropdown was not aligned properly, and upon further inspection, I found that the previous developers had added the following code to the main CSS for various effects:

.dropdown-menu {
margin-left: 3% !important;
width: 320px;
} 

To resolve the alignment issue, I included additional CSS specific to the page where the select picker was being used:

.dropdown-menu {
    margin-left:0px;
}

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

What is the best method for aligning forms vertically within a page layout?

I'm working on designing a contact form, but I'm having trouble getting everything to align properly. Specifically, I can't seem to get the form elements to line up vertically and I also want the Message label to appear on the top left side ...

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

Positioning of background images

My goal is to display a full background image on a website, ensuring that the bottom of the image aligns with the bottom of the browser window without any cropping. I want the image to be positioned at the bottom left corner, cutting off anything above o ...

Ways to Customize <td> Elements Within a <table> Container

Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below: https://i.sstatic.net/WJjA8.png However, what I am currently receiving is: https://i.sstatic.net/bLyvd.png #beng ...

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

Maintain the values of radio buttons, dropdowns, and checkboxes using Javascript

When I click on a radio button, it activates a drop down menu. Upon selecting different values from the drop down, various checkboxes become visible. Now, I want to preserve the selection of the radio button along with the selected drop down values and ch ...

Ways to incorporate text using css within a textarea?

I want to include an image on my webpage using the following CSS: { background-image: url(../images/icon_new_reset.png); background-repeat: no-repeat; } Is there a way to provide alternative text or overlay text on this background image? ...

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...

Bringing in the node-spotify or spotify-web modules to the browser for seamless integration

Has anyone successfully used Spotify's Playlist API in a browser? It seems that the web API only covers metadata, and to access the full API I need to use libspotify. Do I need to set up a Spotify API server myself or use node libraries like node-spot ...

Utilizing Timer Control for Image Rotation in Presentations

I have two sets of images named Div1 and Div2 that need to be displayed in a slideshow. The condition is as follows: For the first seven days, I want the images from the first set, Div1, to appear in the slideshow. Once the seven days are over, the images ...

Aligning Bootstrap Buttons

How do I create a gap between my Bootstrap4 button and the top of the table, while also aligning it to the edge of the table? <div class="container"> <div class="table-title"> <div class="row"> ...

Update the output paragraph in an HTML dropdown list

Within my HTML code, there is a dropdown list followed by a paragraph. Inside the dropdown list, I have included options for various animals - Dog, Cat, Mouse, and Bird. When someone selects 'Cat' from the dropdown list and presses submit, I wan ...

Is CSS Transition smoothly easing in, but not out?

On the image gallery of this website , I have applied transitions to the images, where they ease in (fade in), but revert back to their original state instantly when the mouse moves off the image. Is there a way to make the transition reverse when the mo ...

Combining CSS documents

In order to improve page load speed, I need to consolidate multiple CSS files into one large file. Will the styles function properly if I merge them all together, or are there potential issues when combining multiple CSS files? My software is built in Ja ...

Expanding the last row to ensure its proper width with flex-grow

I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ...

Creating a hierarchical structure in HTML to represent a JSON object as a tree: techniques and best practices

I need help with displaying a nested JSON object that shows a one to many relationship between a parent node and its children in an organizational chart format using HTML. I have looked into utilizing Google Charts for this purpose, but I am unsure if it a ...

Menu with dropdown navigation

Looking to create a dynamic and responsive navbar menu with items and subitems on my website. Bootstrap has proven to be challenging when adding submenus. Are there any tools, frameworks, codes or plugins that could assist me in achieving this? It's ...

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

Is it possible for the relative path of a gif image to become invalid when added to a div?

Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...

Create a uniform Bootstrap 5 album grid showcasing various text lengths for a visually cohesive display

Currently, I have designed a bootstrap album which can be viewed here: https://getbootstrap.com/docs/5.0/examples/album/ However, the text displayed in my album varies in length, resulting in an uneven layout like this: https://i.sstatic.net/Qwrnx.png ...