Challenges arise when using Bootstrap 4 for country selection

There have been reports that bootstrap 4 country select is not functioning properly. In an effort to troubleshoot, I delved into the documentation to find a solution.

To make bootstrap-select compatible with bootstrap 4, refer to:

Bootstrap 4 beta-2

It has come to my attention that Bootstrap-select (ver. 1.12.4) remains incompatible with Bootstrap 4 beta-2. To address this issue, include an additional CSS file or insert the following snippet between tags on the webpage where the country-picker is displayed:

Despite implementing the suggested code below, I am still encountering issues. Any assistance would be greatly appreciated.

.bootstrap-select>.dropdown-menu>.dropdown-menu li a {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: 400;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  text-decoration: none;
}

.bootstrap-select>.dropdown-menu>.dropdown-menu li a:hover {
  background-color: #f4f4f4;
}

.bootstrap-select>.dropdown-toggle {
  width: 100%;
}

.dropdown-menu>li.active>a {
  color: #fff !important;
  background-color: #337ab7 !important;
}

.bootstrap-select .check-mark {
  line-height: 14px;
}

.bootstrap-select .check-mark::after {
  font-family: "FontAwesome";
  content: "\f00c";
}

.bootstrap-select button {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Make filled out selects be the same size as empty selects */

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
<script src="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>
<script src="http://hondaofishers.space/assest/js/countrypicker.min.js"></script>


<div>
  <div>
    <select class="selectpicker countrypicker" data-live-search="true" data-default="United States" data-flag="true"></select>
  </div>
</div>

javascripthtmljquerycssbootstrap-4

Answer №1

It seems like the version of bootstrap min js is missing in your code, and it also requires popper js according to the bootstrap 4 documentation. Here's the updated code with the necessary JS added:

Newly added JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Can someone help me out?

<!DOCTYPE html>
<html lang="en">

<!-- Head Section -->
<head>
    <title>Country Select</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css">

    <style>
        /* CSS for bootstrap-select compatibility */
        .dropdown-toggle.btn-default {
            color: #292b2c;
            background-color: #fff;
            border-color: #ccc;
        }
        
        /* More CSS styles */
        ...
    </style>
</head>

<!-- Body Section -->
<body>


    <select class="selectpicker" data-live-search="true" data-default="United States" data-flag="true">
      <option value="select">Select</option>
      <option value="India">India</option>
      <option value="USA">USA</option>
      <option value="Australia">Australia</option>
      <option value="South Africa">South Africa</option>
    </select>



    </div>

    </div>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="http://hondaofishers.space/assest/js/dependancies/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>
    <script src="http://hondaofishers.space/assest/js/countrypicker.min.js"></script>

</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

JavaScript code not functioning properly when accessing all information retrieved from Django Model

When I retrieve the endDate field from a Django model using a for loop on an HTML page, I want to verify if all the end dates are earlier than today's date. To achieve this, I am utilizing JavaScript code. Although my code successfully checks the fir ...

javascriptdjangodjango-modelsdjango-templates

Having trouble with this ajax code? It's not showing up dynamically

There is a live search bar in my project where the results are filtered as the user types. Each result is a clickable link that should load on the same page, but I'm facing some issues with the implementation. The search functionality is powered by a ...

javascriptjqueryajax

Troubleshooting issue with parsing MySQL data in HTML table using Node.js

Seeking Assistance! I am currently in the process of developing a node file that displays data from MySQL on an HTML page with a search bar. My issue is that sometimes when I run the code, enter something into the search bar and hit the button, it works s ...

javascriptjqueryhtmlnode.js

What is the best way to load a partial in Rails asynchronously with AJAX?

I am currently using the following code to load a partial when I reach the bottom of a div containing a table: $(document).ready(function () { $("#pastGigs").scroll(function () { if (isScrollBottom()) { $('#pastGig ...

javascriptjqueryruby-on-railsajaxasynchronous

How to dynamically load a component within a class-based Vue component

I am facing an issue with loading two components dynamically using an object map. Info (options-based) SearchBar (class-based) While it works for the options-based component, I encounter an error stating _currentTab is undefined when trying to load a si ...

javascripttypescriptvue.js

Locate the class ID and refine the search results by another class

I am currently working on a task that involves extracting the first <li> element's id where it has the class name my_class, and checking if the <span> with the class Time contains a ":" using jquery. Below is the sample HTML structure: & ...

javascriptjqueryhtmlcss

limiting the number of HTTP requests within a JavaScript forEach loop

In my current coding situation, I am facing an issue where the HTTP requests are being made simultaneously within a forEach loop. This leads to all the requests firing off at once. const main = async () => { items.forEach(async (i: Item) => ...

javascripttypescriptasynchronous

Guide on integrating an HTML and CSS register form in Django

I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...

javascriptpythonhtmlcssdjango

Determining the installation duration of the React Native screen

Several questions have been asked about this topic, but none of them seem to have a definitive answer. What I am looking to do is calculate the time it takes to navigate to a screen. The timer will start here: navigation.navigate("SomePage") Essentially, ...

javascriptreactjsreact-native

Ways to retrieve an input field value without triggering form submission

I'm currently working on a payment form where users input the amount in a text field. I also have another text field on the same form that should automatically display the amount in words based on the user input. However, I'm struggling to figure ...

javascriptphphtml

Is there a way for me to track the number of times the local HTML document has been accessed?

Imagine we have a standalone HTML file that is sent to someone. Is there a way, possibly using third-party services, to track if the document has been opened without the user knowing? I thought about placing a PHP script on a "friendly" server and making ...

phphtmlajax

What is the reason behind JSLint's preference for x === "undefined" over typeof x == "undefined"?

I'm feeling lost when it comes to JSLint. Initially, my code checked if div:jqmData("me") was undefined in this way: if ( typeof el.jqmData("me") == "undefined" ? el.not(':jqmData(panel="main")').length > 0 : el.not(':jqm ...

javascriptjqueryundefinedjslinttypeof

Passing resolved data from a parent state to a nested view in Angular UI Router

Currently, I am developing an Angular web application that will showcase various financial events for the user. These events are categorized under a single ID and grouped into different categories. Each group needs to have its own HTML <table> for di ...

javascriptangularjsangular-ui-routerecmascript-6

The functionality of core-ui-select is not functioning properly following the adjustment of the

I've implemented the jquery plugin "core-ui-select" to enhance the appearance of my form select element. Initially, it was functioning perfectly with this URL: However, after applying htaccess to rewrite the URL, the styling no longer works: I&apos ...

javascriptphpjqueryajax

Regular expressions - For alphanumeric or numeric with a possible slash character included

I need assistance with extracting alphanumeric values from a string array using RegEx. For instance: Apartment 101/B First Villa 3324/A Second Milk 12MG/ML Third Sodium 0.00205MG/ML Fourth Water 0.00205MG Fifth Eggs 100 Sixth My goal is to retrieve the v ...

javascriptregex

A comprehensive guide on retrieving data from API across several pages

Struggling with pulling data from an API using React and facing the challenge of retrieving more than one page of data. "info": { "count": 493, "pages": 25, "next": "https://rickandmortyapi.com/api/character/?pa ...

javascriptreactjsjsonfetch-api

Activate a function when the v-data-table in Vuetify is expanded and then collapsed

While trying to create a v-data-table, I came across some odd behavior when monitoring the expanded.sync value. The first layer's expanded.sync value seems normal, but the second layer's expanded.sync has three consecutive identical records. I w ...

javascriptvue.jsvuejs2vue-componentvuetify.js

conceal selected input during ajax request

One of the modules I'm using added a button to my site. However, when this button is clicked, the module automatically sends an ajax request (and unfortunately I can't modify the third party code). How can I dynamically hide and show this button ...

jqueryajax

The most efficient and hygienic method for retrieving a value based on an observable

Looking at the structure of my code, I see that there are numerous Observables and ReplaySubjects. When trying to extract a value from one of these observables in the HTML template, what would be the most effective approach? In certain situations, parame ...

javascriptangulartypescript

Updating a behavior object array in Angular 5 by appending data to the end

After creating a service to share data across my entire application, I'm wondering if it's possible to append new data to an array within the userDataSource. Here is how the service looks: user.service userDataSource = BehaviorSubject<Array& ...

javascriptangulartypescript