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

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...

html

What is the best way to line up three divs horizontally and center the contents inside each one?

I'm brand new to CSS and need some help simplifying things. I am trying to create 3 divs that are all the same size, placed next to each other, with centered content in each one. Currently, I have a central div with a rotating image, and on the left a ...

htmlcss

Trigger Function on Input Change in Angular 2

Key aspects of component nesting: export class Child { @Input() public value: string; public childFunction(){...} } Main component responsibilities: export class Parent { public value2: string; function1(){ value2 = "a" } function2( ...

javascriptangulardata-binding

turning every input field's border to red if none of them were filled out at least once

I struggle with javascript and need some help. I have a form with multiple input fields, and I want to ensure that the user fills in at least one of them. I found code that triggers an alert message if the user does not fill in any fields, but I would pref ...

javascriptjqueryhtmlcss

Displaying a Progress Bar while Inserting Data into a Database Using Asp.net

When I click on the insert/update button, I want to display a progress bar. However, due to some validations, updations, and insertion functions in the buttons, I am unable to calculate the time taken for a particular button click process. The following ...

jqueryasp.netajax

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

jqueryhtmlajaximagepost

The middleware for JQuery File Upload is experiencing an issue with generating image versions

My implementation of the jquery-file-upload-middleware is set up following the instructions in a straightforward example of usage: // configuration of upload middleware upload.configure({ uploadDir: './public/uploads', upload ...

jquerynode.jsexpressjquery-file-upload

Version 5 of Material UI has a bug where the Grid component does not properly stretch

How can I make the Grid component stretch when one of the Card components contains extra text? You can view the sample code here. Changing the alignItems property to "flex-end" or "center" works, but when using alignItems: "stretch" it does not work. I ...

javascriptreactjsmaterial-uigridmaterial-design

Saving an array within the Yii framework

The view contains the following form: <form method="POST" action="<?php echo Yii::$app->request->baseUrl;?>/telephone/addnow/" role="form" enctype="multipart/form-data"> <label>Upload your photo:</label><input type="fi ...

javascriptphpyiiyii2

Exiting or returning from a $scope function in AngularJS: a guide

There are times when I need to exit from my $scope function based on a certain condition. I have attempted to achieve this using the return statement. However, my efforts have been in vain as it only exits from the current loop and not from the main scop ...

javascriptangularjs

Automatically refresh online user list upon new user login

<?php <div class="someclass"> <ul class="someclass"> foreach ($this->showonline as $key => $friend) { <li> $friend['avatar']; $friend['name']; </l ...

phpjqueryajaxlivechat

<ul> hover effect and text </ul>

Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...

cssrollover

Dynamic property access using optional chaining in JavaScript

My attempt to utilize optional chaining, a feature provided by TypeScript for safely accessing dynamic properties, seems to be invalid. export const theme = { headers: { h1: { }, h6: { color: '#828286' }, }, } console.in ...

javascripttypescriptstyled-componentsoptional-chaining

Most efficient method for nesting child objects within an array of objects using JavaScript

Hey experts, I'm on the hunt for the most efficient method to transform this data: [ { "id": 1, "animal": "cat", "age": 6, "name": "loky" }, { "id": 2, "animal": &quo ...

javascriptarraysjsonobjectnest

Determine the item in a collection of objects that contains a specific key

What is the most efficient method for locating an object by a specific key in JS when given an array of objects? Utilizing jQuery and underscoreJS is acceptable. I am simply seeking the simplest solution with minimal code. Illustration: Suppose we have a ...

javascriptjqueryarraysunderscore.js

Determining the Percentage of a Bar Chart

When utilizing Chart.js along with the fork available at (https://github.com/leighquince/Chart.js), I successfully developed a bar chart featuring 3 bars: Goal, Actual, and Available data. My challenge lies in finding a method to calculate the percentage ...

javascriptjquerychartschart.js

Limiting Selection of Specific Days in jQuery Date Picker

I am currently working on a project that involves two date pickers. The first one is for the Start Date and the second one is for the End date. My goal is to disable days in the "End date" date picker which are before the selected date in the Start date. ...

jqueryjquery-uidate

Guide for integrating images in React Native

I am struggling to display images in a carousel properly. I attempted to require them using JSON like this {"Image": require("$PATH")} or in a js file within the ParallaxImage tag, but nothing seems to work... Item Creator _renderItem ...

javascriptnode.jsjsonreact-nativereact-native-snap-carousel

Retrieve a specific value from an array of objects by searching for a particular object's value

Here is an example of an array of objects I am working with: $scope.SACCodes = [ {'code':'023', 'description':'Spread FTGs', 'group':'footings'}, {'code':'024', ' ...

javascriptangularjs

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

htmlcsstwitter-bootstrap