Full options in Bootstrap Selectpicker are not being displayed

I am currently facing an issue with a searchable list containing nearly 2700 items in a bootstrap selectpicker. When I scroll down the options, only around 50 or 60 are displayed, leaving the rest empty. You can view this problem in detail by checking out this image. The search functionality works fine across all 2700 products, but the dropdown does not fully display all the available options.

Even after applying 

$('.selectpicker').selectpicker({ maxOptions:2 })
to set the maximum number of options, the issue persists.

I have tried my best to explain the situation accurately.

htmljquerycssbootstrap-4bootstrap-selectpicker

Answer №1

Could you please review the code below? Hopefully, it will suit your needs. The maxOptions parameter is utilized when configuring a multiple select feature in this demonstration with maxOptions: 2, allowing for up to 2 selections.

For further reference, visit the following link: https://jsfiddle.net/yudizsolutions/br1hyof8/

$('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 4,
  maxOptions: 2
});
.bootstrap-select.btn-group .dropdown-menu.inner,
.dropdown-menu.open {
  min-height: 100vh !important;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <title>Bootstrap selectpicker</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
</head>


<body>
  <select data-live-search="true" class="selectpicker" multiple>
    <option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
    <option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
    <option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
    (Additional options truncated for brevity)
  </select>



</body>

</html>

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

Using jQuery UI datepicker to fill an array of input fields with alternate dates

Utilizing jquery ui datepicker to set start and end dates for various events on a dynamic page. Each event requires separate day, month, and year fields like so: <input type="text" name="event[0].startDate" class="date"/> <input type="hidden" nam ...

jqueryjquery-ui

What is the best way to combine two PHP JSON files into one for an autocomplete feature?

I am facing a challenge with merging two JSON files into one. The issue arises as the first JSON input displays image file names with previews, while the second input only shows text file names. How can these JSON files be integrated into a single file? P ...

phpjqueryhtmljson

Positioning of the footer using CSS: A query

What is the best way to position a footer if we know its height? For instance, if the height of the footer is 100px: footer { position:absolute; bottom: 100px; background: red; } If this approach is not recommended, could someone assist m ...

css

What is the method for embedding HTML content into the header section of tcpdf?

I am currently utilizing the tcpdf library to create a PDF document. I have implemented the smarty template engine to manage the data. Below is the code snippet for inserting header data: // set default header data $pdf->SetHeaderData(PDF_HEADER_LOGO, ...

phphtmlsmartytcpdf

Unable to access additional features in dropdown menu

I need to extract all the options from a select dropdown menu. <select id="filterSel" name="filterSel" class="fixed-size" onchange="fnLoadAccountslegEnt(this.value); " onclick="closeDropDown();" size="1" style="top: 6.5px; margin: 0px; width: 58%; hei ...

javajqueryseleniumselectselenium-webdriver

When trying to find a substring within a string in JavaScript, the "else if" statement may not be triggered

I'm currently working on creating a Hangman game using HTML and JS. Most of the code is functioning properly, but I've hit a roadblock. For some reason, one part of my if else statement isn't working correctly. Here's the line of code: ...

javascripthtml

Accessing a hyperlink within the existing page

How can I make a hyperlink in an HTML document that opens the linked document (link1.html) under the link on the same page? links.html: <body> <h3>Links</h3< <a href="link1.html">link1</a> </body> Desired out ...

html

Icon button with label positioned underneath - utilizing Font Awesome icons

I am looking to design a button that features a Font Awesome icon with text below it for a navigation menu. The goal is to achieve a layout similar to the icons found in the Microsoft ribbon. Additionally, I want to include an arrow below the button (simi ...

htmlcssfont-awesome

How can I configure Grails to properly interpret my JSON PUT AJAX request?

In this Grails app, the form is set up in a standard way. <g:form url="[resource:myClass, action:'update']" method="PUT" > <fieldset class="form"> <g:render template="form"/> </fieldset> <fieldset c ...

jqueryajaxjsongrailsgrails-orm

I must update the menu to show only one sub-menu at a time, ensuring that multiple menus cannot be displayed simultaneously

When I click on a menu option, it displays correctly, but when I click on another option, both are displayed. The goal is to only display one at a time. https://i.sstatic.net/J6vLf.png $('.sub-menu ul').hide(); $(".sub-menu a").click( ...

javascripthtmljquerycssfrontend

Using focusout and clicking buttons do not effectively interact with child elements

I have a series of div elements, each containing a button. When I click on a button, text is displayed, and when I click away, the information hides with a focus-out function. If I have one button open and then want to click on another parent button, it wo ...

javascriptjqueryhtml

Add a touch of vibrancy to the button background by incorporating two

Looking to apply two different background colors to my button. Here is the design I'm aiming for: https://i.sstatic.net/gzrIe.png Is it feasible to achieve this design using only CSS, or do you have any other suggestions? Appreciate your input! ...

htmljquerycss

Ensure that in Django bootstrap4, the parameter "form" is populated with a functioning Django Form

I encountered a Bootstrap exception that says: 'Parameter "form" should contain a valid Django Form.' This occurred while trying to execute the code provided in this tutorial: {% load bootstrap4 %} <form action="/url/to/submit/" method="po ...

djangoformsbootstrap-4

Tips for updating the class of a button as you switch between slides

My ionic slide box features 4 slides that can be navigated using buttons at the bottom of the screen or by finger-scrolling. The goal is to have the 'active' class added to the button corresponding to the currently active slide. For instance, if ...

cssangularjsslideshowionic-frameworkslide

:host ::ng-deep is not properly cascading styles to material checkbox

Struggling with changing the background color of a checkbox in a material multiselect. I've attempted both .mat-pseudo-checkbox-checked { background-color: #a9a9a9 !important; } and :host ::ng-deep .mat-pseudo-checkbox-checked { background-color: ...

javascriptcssangularangular-material

Is there a way to apply the active class without relying on an anchor element?

After creating a one-page website, I utilized JavaScript to prevent the hash from appearing in the URL. Here is the HTML code: <ul class="click crsl"> <li><a class="page1 dot active"></a></li> <li><a class=" ...

javascriptjquery

Is there a way to incorporate borders into JqTree?

I attempted the following .jqtree-tree .jqtree-element { border-color: black; border-width: 10px; } It seems that I may be overlooking certain elements to which this CSS should be applied ...

jquerycssjqtree

How can you implement a CSS tooltip specifically for a single element?

Is there a way to add a margin specifically to one tooltip element in bootstrap 4? $('[data-toggle="tooltip"]').tooltip() .tooltip.bs-tooltip-right{ margin-left: 30px; } button{ margin-top: 20px !important; } <link rel="stylesheet" ...

twitter-bootstrapcsstooltipbootstrap-4

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect. To solve this problem, I added a background color to the overlay div w ...

jquerycssinternet-explorer-8internet-explorer-7overlay

What is the best way to cut strings in JavaScript or jQuery?

Can anyone provide guidance on how to trim using this code? $('#type_of_station').text() Here is the result: >>> $('#type_of_station').text() "pizza delivery system " It appears that there is a space after the last word in ...

javascriptjquery