The default appearance of bootstrap-select appears to be flawed

Utilizing the amazing Bootstrap-select jQuery plugin has brought two unexpected default styles to my selectboxes. Despite inserting the necessary CSS and JS files into my website, all select boxes are displaying with these peculiar default settings (without any additional attributes applied).

Environment

Two oddities :

  • All of my select boxes have an unexpected bootstrap btn-danger class instead of the expected btn-default class.
  • Upon reaching a certain break point, the padding within the options disappears, causing them to be flush against the border.

Code for enqueuing javascript and css:

function my_scripts() {
  wp_register_style( 'bootstrap-select-css-cdn', 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274548485354535546570a54424b4dd445454744411aec1dbccfccac7ccc6d'>[email protected]</a>/dist/css/bootstrap-select.min.css' );
  wp_enqueue_style('bootstrap-select-css-cdn');

  wp_register_script( 'bootstrap-select-js-cdn', 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849144a5c54555e444f5401565454134358">[email protected]</a>/dist/js/bootstrap-select.min.js', null, null, true );
  wp_enqueue_script('bootstrap-select-js-cdn');
}
add_action('wp_enqueue_scripts', 'my_scripts');

To provide full context, here is the code for the select box:

<div class="form-group col-sm-3">
  <label for='order'>Order:</label><br>
  <select name='order' id='order' class="form-control">
    <option value='ASC'>ASC</option>
    <option value='DESC'>DESC</option>
  </select>
</div>

Inspecting the markup in the browser reveals the following:

Thus, two questions arise:

  1. Why are these unusual defaults occurring? It seems unlikely that this behavior is standard.
  2. How can this be corrected? How can I ensure that all select boxes throughout the site display as "btn-default" rather than "btn-danger," and how can the missing padding be added back for the disappearing options at the breakpoint?
jquerycsswordpressbootstrap-select

Answer №1

When using bootstrap-select, it automatically applies the btn-light class. However, the WP Bootstrap Starter Theme seems to have styled the btn-light class in an unexpected way.

To resolve this issue, I opted for a simple and non-invasive solution of doing a find/replace in the bootstrap-select js file: replacing all instances of btn-light with btn-default. Luckily, there was only one instance of btn-light in the js file, making it a quick fix.

To address the padding problem, I identified the breakpoint where the padding disappeared and added a rule to reinstate it:

@media only screen and (max-width: 991px) {
  .dropdown-menu.inner.show{
    padding: 10px;
  }
}

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

How do you trigger the playback of a specific audio file when a user clicks on it?

I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...

javascripthtmlcss

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Current Situation: I am currently in the process of iterating through a machine learning model and dynamically updating my "divs" as text labels. My goal is to transform these values into individual bars that visually represent the values instead of just d ...

javascripthtmlcss

Fetching arrays in Javascript

I am utilizing the Dragsort plugin and aiming to tag IDs in an array for printing. Here is my HTML code: <ul id="list1"> <li class="ss"><div>1</div></li> <li><div>2</div></li> <li>&l ...

javascriptjquery

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...

javascriptjqueryhtml

Error: The jQuery Class is returning an undefined value

I have been working on creating a basic AJAX request class in jQuery. However, I've encountered an issue with the 'process' function where I can get the response from the variable 'response'. When I return 'response', it ...

javascriptphpjqueryajax

Calculate the total sum of input values using jQuery

Here is the HTML I've been working with: I am trying to create a script where one textbox will display the total amount, and another textbox will display the following data: "name": [{ "id": 3, "qty": 2 }, { "id": 4, "qty": 5 }] Here's ...

javascriptjqueryhtml

Issues with the functionality of minimized AngularJS JavaScript files

I combined all JS files into one and minified them, but now none of the site features are working. There were too many separate JS files to include individually, so I decided to merge them together. Is there a better method to reduce the number of HTTP r ...

javascriptphpjqueryangularjsminify

Choose various selections from a drop-down menu using AngularJs

I am currently working on a project where I need to be able to select multiple options from a dropdown menu. The code snippet for this functionality looks like the following: //Controller $scope.data = [{id: 1, Country: Zambia}, {id: 2, Coun ...

javascriptjqueryangularjs

Picture appears to be off-center

I created a loginPage.php file with the following content: <?php //some php stuff ?> <!DOCTYPE html> <html> <head> <title>Login Form Design</title> <link rel="stylesheet" type="text/css" href="stylelogin.c ...

phphtmlcss

Could the difficulty in clicking the first entry in Firefox be a bug?

Be sure to focus on the section highlighted in blue in the initial table. If you'd like, you can view the issue here view image http://example.com/static/error.gif UPDATE you can replicate it by double-clicking on the top portion of the first entry ...

htmlcssfirefoxcss-float

Unable to delete replicated item entries

Having trouble removing cloned list items in a menu with an on click action on the back link. Despite trying different approaches, such as empty(), remove(), and children().remove(), the cloned elements are not being removed and causing the sub menu to gr ...

jqueryclone

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

cssreactjs

Combining jQuery plugins with AngularJS for enhanced functionality

As a beginner with angular, I've come across the recommendation to not use it together with jQuery. While there are numerous useful plugins developed in jQuery that may not be easily accessible in angular, you would have to build them yourself in ang ...

jqueryangularjs

Verify if a <select> element exists inside the main div

Is there a way for me to check if a <select> element is present within the parent div and display certain content based on its existence? Appreciate any assistance! ...

javascriptjqueryhtml

Is there a way to postpone the execution of a scheduled interval function?

Below is the setup of my function: setInterval(function () { get_fb(); }, 10000); If a user interacts with an element, such as hovering over it or clicking on it, I want to reset the timer back to 10 seconds. How can I instruct the program to achieve th ...

javascriptjquery

Dynamic value updates using jQuery input type formulas

I need help with a form that has two inputs: The first input allows the user to enter an amount, such as 1000. The second input is read-only and should display the value of the first input plus 1%. For example, if the user types in 1000 in the first fie ...

javascriptjqueryhtml

When an onClick event is triggered in jQuery, generate a certain number of div blocks based on the available list items, such as image source and heading text

Is it possible to generate input fields dynamically based on a dynamic list with checkboxes, labels, text, images, etc.? I currently have a working solution for checkboxes and labels using the code snippet below: let $checkboxContent = $('.checkboxes ...

javascriptjquery

"Is there a way to transfer a value from one list box to another without needing to refresh the page, by utilizing AJAX,

Is there a way to automatically load Related Course levels in the Course Level Listbox when selecting a Course from the Course list? <script type="text/javascript" src="js/jquery.js"></script> <div>Course:<select name="course_id" id= ...

javascriptphpjqueryhtmlajax

What is the best way to effectively incorporate Ruby into the CSS attribute of a HAML %li element?

Greetings everyone, I am new to the world of development and seeking guidance from experienced individuals. I have been trying to solve a coding issue for quite some time now. I am currently enrolled in a programming course at Code Academy based in Chicago ...

ruby-on-railscsshamlerbinterpolation

Load new Wordpress posts seamlessly without any need to refresh the page automatically

I'm curious if anyone has thoughts on how to make Wordpress automatically display new posts on the homepage without needing to manually refresh? My guess is that this could be done with ajax/jQuery, but I haven't come across any suggestions yet. ...

jqueryajaxwordpressrefresh