Troubleshooting Select2 frontend design in Bootstrap 4

I've been working on implementing Select2 with Bootstrap 4 for my <select> elements.

Unfortunately, I ran into an issue because there isn't an official Bootstrap 4 template for Select2. However, I came across this project which seems to be quite impressive.

The problem I'm facing is with the is-invalid class.

Whenever I apply this class, the borders of my <select> elements turn red when the page loads and then revert back to their original state.

I attempted to create a custom class to mimic the Bootstrap color scheme like this:

.invalid-select2 {
  border-color: #dc3545;
}

.invalid-select2:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

However, the issue persists;

You can observe the problem in action on JSFIDDLE

Does anyone have any suggestions on how to resolve this?

Thank you in advance!

htmlcsstwitter-bootstrapbootstrap-4jquery-select2

Answer №1

The flickering occurs because the class is added to the select box's attribute, causing the style to be applied immediately. Subsequently, select2 classes are applied which hide the select box, resulting in the flicker.

An alternative solution is to add the class when the document is fully loaded.

$(document).ready(function(){

    $('#combo').select2
  ({
    theme: 'bootstrap'
  });

  $("#combo + span").addClass("is-invalid");

});

UPDATE: To resolve the focus issue you're encountering, you'll need to override a few classes.

.is-invalid .select2-selection,
.needs-validation ~ span > .select2-dropdown{
  border-color:red !important;
}

.is-invalid .select2-selection targets the top part of the dropdown, while the second class 

.needs-validation ~ span > .select2-dropdown
selects the actual dropdown list. Remember to add .needs-validation to the top-level div; once the form is validated, you can switch it to was-validated

Check out the Bootstrap documentation on validation for more information.

Here is a fiddle for reference.

Answer №2

I successfully implemented some CSS code to apply a stylish red border 

.is-invalid + .select2-container--bootstrap .select2-selection--single {
    border: 1px solid #f44336;
}

Answer №3

Have you experimented with including !important in your CSS declaration?

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

Improve the performance of my website and resolve the zooming problem

Trying my hand at teaching myself jquery and creating a decent layout. I believe what I have done is acceptable, but I still have some questions. This is my first attempt at jquery without copying someone else's work. I've aimed to keep it relev ...

jqueryhtmlcss

When the HTML content matches a specific value, initiate a click event to trigger

Can anyone help me troubleshoot? I've tried multiple methods but can't seem to get it right. Here's a breakdown of what I'm attempting to accomplish: #info-NUMBER-btn shows Click to display more information. #info-NUMBER CSS is set t ...

javascriptjqueryhtmlcss

Adjusting the value of a variable in an Scss selector will result in a change, regardless of the presence of an element matching the selector

CSS File $dark-mode: false!default; $primary-dark: blue; [dark-mode='dark'] { background: gray!important; $dark-mode: true!global; } [dark-mode='light'] { background: yellow!important; $dark-mode: false!global; } @if $dark-m ...

htmlcsssass

Ways to center an image without relying on margin or padding to achieve alignment

Is it possible to center all tags except for the img without using margins or paddings? header { display: flex; flex-direction: column; align-items: center; } .logo { border-radius: 50%; width: 100px; height: 100px; margin: 10px 0 0 10px; ...

htmlcss

Menu Navigation: Sequentially Colored Badges for Navigation Items

Within the MainService.ts file, there is a function that can alter the color set in badgesColorSet. The json config already defines 3 colors and the goal is for these colors to change each time the website is refreshed - for example, changing from red to g ...

htmlcssangulartypescriptangular-material

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

jqueryhtmlcsscss-positionz-index

Sort data by checking either multiple or single checkbox options in AngularJS; if none are selected, display all results

My goal is to implement a filter in my AngularJS code that will filter data based on selected checkboxes. If no checkbox is selected, all results should be displayed without any filtering. Currently, the issue I am facing is that the data is only displayed ...

javascripthtmlangularjsfilter

The issue arises when trying to display ConverseJs modals on a website that already has Bootstrap 4 integrated, causing them

As a beginner with ConverseJs, I appreciate your patience. I have successfully set up an Ejabberd server and can connect to it using the ConverseJs plugin. However, when I try to click on any options that would normally display a modal, I see a grey overl ...

bootstrap-4bootstrap-modalconverse.js

What is the best method for inserting space between two divs?

I need to create more space between the last two cards and the image at the bottom, but this spacing should increase as I resize the browser window. Can anyone help me with this? https://i.stack.imgur.com/rq9t2.png https://i.stack.imgur.com/tOikx.png Th ...

htmlcssimageresponsive-design

The JQuery toggle functionality may experience limitations on certain mobile browsers, such as Moto E

My code works perfectly on Windows browsers, but I'm experiencing some issues on certain mobile devices like Moto E. Can anyone offer some advice on how to resolve this? Jquery $(".child-row .child-head").on("click", function () { $(this).nex ...

jqueryhtml

"Creating multiple circles on an HTML5 canvas using an iPad: A step-by-step guide

My current code is only drawing one circle at a time on an iPad view, but I want to be able to draw multiple circles simultaneously. How can I achieve this? // Setting up touch events for drawing circles var canvas = document.getElementById('pain ...

javascripthtml

Understanding XML parsing problems

I've decided to keep the live xml/atom-feed URL private, as it's hosted on LiveJournal. However, I'm a bit confused about how this all works: let XML_URL = "https://users.livejournal.com/<username>/data/atom"; $(function(){ ...

javascripthtmljqueryxmlatom-feed

Can anyone provide a solution for determining the number of active intervals in Javascript?

Similar Question: How to View All Timeouts and Intervals in JavaScript? I've been working on an HTML5 game that includes a lot of graphical effects using intervals created by the setInterval function. However, I've noticed that my game is ru ...

javascriptperformancehtmlsetinterval

Creating a personalized error page with the .htaccess file

I want to create personalized error pages for different errors This is the layout of my directory: .htaccess error_pages: error_400.html error_401.html error_404.html ...

phphtmlcss.htaccess

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

cssreactjsreact-bootstrapbootstrap-5

drawing tool with JavaScript and HTML5

Can you help me figure out why my sketchpad isn't working in Processing.js? I've checked my code and there are no errors, but the canvas is not showing up. Any suggestions? Take a look at the code below: function createSketchPad(processing) { ...

javascripthtmlprocessingprocessing.js

Issue with function operation

Incorporating HTML code with Angular elements on the homepage of a PHP forum script has been challenging. I have inserted the PHP code into index.template.php as instructed, but unfortunately, nothing is being displayed. <?php /** * This function ...

phphtmlangularjs

Blending the widths of native elements with those of Bootstrap columns

Having trouble aligning spans in a Bootstrap 3 form to degrade into a stack on mobile: From [station1] to [station2] at [time] From [station1] to [station2] at [time] While this code works to an extent: <div class="row"> <div class="col ...

csstwitter-bootstraptwitter-bootstrap-3

Organizing DIVs upon website initialization

My website features a layout with three columns: <div id="column1"></div> <div id="column2"></div> <div id="column3"></div> I currently have 3 divs on the webpage: <div id="1">aaa</div> <div id="2">b ...

javascriptjqueryhtml

Javascript: Harnessing Textbox Arrays for Improved Functionality

Check out the form displayed below. <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="text" name="name[]" id="name"><br> <input type="text" name="name[]" id="name"><br> <input type="fil ...

javascripthtml