The Bootstrap-Select dropdown refuses to open

I've been attempting to create a menu using data-subtext, and while I have come across some suggestions on stackoverflow, I'm still having trouble getting the menu to function properly. The issue I'm facing is that the menu doesn't seem to open at all.

Can anyone point out what I might be doing wrong? Here's the code snippet in question: Link: https://jsfiddle.net/snake93/mfhvs6xp/55/

Also, is there a way to remove the black border through CSS when the menu is active? Here's an example image for reference: https://ibb.co/jwWzL7T

$('.strunz').selectpicker();
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>

<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d6e7f4f3b2139213f">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070041e061e00">[email protected]</a>/dist/css/bootstrap.min.css">


<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
  <select class="strunz" data-show-subtext="true" data-size="8">
<option class="optns" data-subtext="Heinz" value="0">Select car:</option>
<option class="optns" data-subtext="Heinz" value="1">Audi</option>
<option class="optns" data-subtext="Heinz" value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
  </select>

htmljquerycssbootstrap-selectbootstrap-selectpicker

Answer №1

$('.strunz').selectpicker();
.optns {
  background: red;
}

.optns:hover {
  background: black !important;
  color: yellow !important;
}

.btn {
  border-radius: 0px !important
}

.dropdown  .bootstrap-select .dropdown-toggle:focus, .dropdown  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
    outline: none !important;
 }
 
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>


<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>

<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661208100816">[email protected]</a>/dist/js/bootstrap.min.js"></script>

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


<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
  <select class="strunz" data-show-subtext="true" data-size="8">
    <option class="optns" data-subtext="Heinz" value="0">Select car:</option>
    <option class="optns" data-subtext="Heinz" value="1">Audi</option>
    <option class="optns" data-subtext="Heinz" value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>

Add Popper under jQuery as you did and for black border add this custom CSS

Include Popper jQuery

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

CSS for Black Border

.dropdown  .bootstrap-select .dropdown-toggle:focus, .dropdown  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
    outline: none !important;
 }

Answer №2

Everything looks great in your code except for one thing - you forgot to include the popper.js CDN link. Once you add that, your dropdown should work perfectly. Take a look at the preview below:

$('.strunz').selectpicker();
 
.optns {
  background: red;
}

.optns:hover {
  background: black !important;
  color: yellow !important;
}

.btn {
  border-radius: 0px !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaaeb4acb4aa">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70121f1f04030402110030445e465e40">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>


<!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
<select class="strunz" data-show-subtext="true" data-size="8">
   <option class="optns" data-subtext="Heinz" value="0">Select car:</option>
   <option class="optns" data-subtext="Heinz" value="1">Audi</option>
   <option class="optns" data-subtext="Heinz" value="2">BMW</option>
   <option value="3">Citroen</option>
   <option value="4">Ford</option>
   <option value="5">Honda</option>
   <option value="6">Jaguar</option>
   <option value="7">Land Rover</option>
   <option value="8">Mercedes</option>
   <option value="9">Mini</option>
   <option value="10">Nissan</option>
   <option value="11">Toyota</option>
   <option value="12">Volvo</option>
 </select>

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

Instructions for compiling node-sass within the present directory for specific files

In my project, the directory structure looks like this: - folder1 - styles1.scss - folder2 - styles2.scss I want to utilize node-sass through the command line to generate the following output: - folder1 - styles1.scss - styles1.css - folder2 ...

cssnpmsassnode-sass

Is there a way to adjust the sizes of images within a flexbox layout?

I am currently working on developing a website for my portfolio and I want to achieve a similar layout to this: https://i.stack.imgur.com/giJNF.png However, I am facing some difficulties with displaying the Twitter/Instagram and Deviantart icons. I am usi ...

htmlcssimageflexbox

Seeking assistance with setting up BxSlider installation

I'm struggling with adding bxslider to my HTML template. No matter what I try, the slider doesn't work as expected. When I preview my website, all three images are displayed together in a single column. Can someone please guide me on how to fix t ...

javascriptjqueryhtmlcss

arrangement of form labels in material-ui

Is there a way to configure the labels in Material-ui + react forms to be displayed beside input fields for better readability? For example: name [input] title [input] instead of name [input] title [input] I have looked through the documentation b ...

cssreactjsformsmaterial-uiformik-material-ui

concealing components during screen adjustments

There are 3 identical <div>s available: <div class="box">Hello World!</div> <div class="box">Hello World!</div> <div class="box">Hello World!</div> I need these <div>s to ...

htmlcssbootstrap-4

The font size calculation is larger than the CSS definition on the Asus Nexus 7 device

Running the website on an Asus Nexus 7 (developed in jQueryMobile), I set the font size in CSS to be 14px. However, while debugging using Chrome on my PC, I noticed that the computed size is actually 22px. Here's a snippet of the HTML code: <div ...

htmlcss

methods for transforming JSON array output objects into individual non-array values

I'm facing an issue with a JSON result that contains latitude and longitude as an array like [13.0801721, 80.2838331]. I need help in converting this to comma-separated values without the array brackets, similar to 13.0801721, 80.2838331. This is my ...

javascriptjqueryjson

Tips for sending multiple values to the next page using AngularJS

Hey there, I'm new to AngularJS and currently using Onsen UI in my demo application. I have two pages in my app and I'm trying to pass two values to the next page. I managed to pass one value successfully, but when I attempt to send the second on ...

htmlangularjsonsen-ui

Is there a way to store a jQuery CSS manipulation within a cookie?

On my Wordpress site, I have a code that allows users to change the font size of the body when they click on one of three generated buttons: <button class='body_standard_font_size'>Standard</button> <button class='body_medium ...

jquerycsscookies

Unresponsive jQuery Autocomplete function failing to trigger

There seems to be an issue with the unobtrusive autocomplete feature not working on the Sales/Accounts page of my application. I have followed advice from different sources, including a blog post linked here, on how to set up the autocomplete functionality ...

jqueryjsonasp.net-mvcjquery-uiautocomplete

What is the CSS technique for concealing the content of an ordered list item while retaining the marker?

In our order process, we utilize an ordered list to display the steps in sequence: <ol> <li>Products</li> <li class="active">Customer</li> <li>Payment</li> </ol> On desktop view, it appears a ...

htmlcss

Is there a way to position the logo icons on the right side of the footer?

My goal is to connect social media platforms with their respective logos, and I'm encountering an issue. The problem arises when attempting to align the list items to the right of the footer. <footer> <div class="footer-wrapper"> ...

htmlcss

Can you show me the steps to incorporate a fade-in effect?

Is there a way to incorporate a fade in effect here? $(document).ready(function(){ var myQuotes = new Array(); myQuotes[0] = "The connection of all things... "; myQuotes[1] = "Achieving greatness"; myQuotes[2] = "Your purpose is to uncover" ...

jqueryrandomquotesfadefadein

Inform jQuery that the draggable element is in the process of being dragged dynamically

Currently, this issue is a vital component of an ongoing task. Once we can resolve this issue, it will lead to the completion of this and another inquiry. The original objective can be found here: drag marker outside map to html element You can view the ...

javascriptjqueryjquery-ui

Troubles with HTML and div elements

I have a specific need to dynamically load HTML into a div container with the style attribute overflow set to hidden. I have implemented next and previous buttons for navigation, but I am facing an issue where the content overlaps at the beginning and end ...

html

Slow rotation in CSS styling

.badge { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: ...

animationcssrotationflip

JavaScript nested function that returns the ID of the first div element only upon being clicked

I am facing an issue with a function that returns the id of the first div in a post when an ajax call is made. The problem is that it repeats the same id for all subsequent elements or div tags. However, when the function is used on click with specified ...

javascriptphpjquery

Actions for jQuery's mouseenter and mouseleave events

I've implemented a jQuery script that controls the visibility of elements based on mouse events: $("#divid").mouseenter(function() { $('#divid').show(1000); }).mouseleave(function() { $('#divid').hide(1000); }); $("#hldiv" ...

javascriptjqueryonmouseoveronmouseoutonmouseup

Navigate to specific location within a hidden overflow

<ul id="the-list" style="overflow:hidden;height:100px;> <li><a id="link1" href="#">Link 1</a></li> <li><a id="link2" href="#">Link 2</a></li> <li><a id="link3" href="#">Link 3< ...

jqueryhtml

React Hamburger Menu not working as intended

I am facing an issue with my responsive hamburger menu. It is not functioning correctly when clicked on. The menu should display the navigation links and switch icons upon clicking, but it does neither. When I remove the line "{open && NavLink ...

javascriptcssreactjsuse-statehamburger-menu