Bootstrap revamps dropdown menu code into a convoluted mess

I recently started working on a project with the Material Design theme from for a CodeIgniter application. However, I've encountered an issue with the dropdown functionality. It seems that Bootstrap is altering the original code, transforming it from this:

<select class="form-control show-tic" data-live-search="true" name="idepe" id="idepe">
    <option value="1">ALDIPH Alger</option>
    <option value="2">ALTRO Skikda</option>
    <option value="3">SOTRAMO</option>
    <option value="4">ENPS Alger</option>
    <option value="5">SOTRAMEST</option>
</select>

to this modified code:

<div class="btn-group bootstrap-select form-control show-tic">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="idepe" title="ALTRO Skikda" aria-expanded="false">
        <span class="filter-option pull-left">ALTRO Skikda</span> &nbsp;
        <span class="bs-caret">
          <span class="caret"></span>
        </span>
    </button>
    <div class="dropdown-menu open" style="max-height: 368px; overflow: hidden; min-height: 132px;">
        <div class="bs-searchbox">
            <input type="text" class="form-control" autocomplete="off">
        </div>
        <ul class="dropdown-menu inner" role="menu" style="max-height: 318px; overflow-y: auto; min-height: 82px;">
            <li data-original-index="0" class="active"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">ALDIPH Alger                    </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
            <li data-original-index="1" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">ALTRO Skikda                    </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
            // More list items here...
        </ul>
    </div>
    <select class="form-control show-tic" data-live-search="true" name="idepe" id="idepe" tabindex="-98">
        <option value="1">ALDIPH Alger </option>
        <option value="2">ALTRO Skikda </option>
        // More options here...
    </select>
</div>

Is there a way to prevent Bootstrap from automatically modifying the dropdown code like this?

javascriptbootstrap-4

Answer №1

The reason for this is that the theme material design comes with built-in custom select code. If you prefer not to use it, simply delete the custom select code. The custom select code is specifically designed for elements targeted with the class "form-control show-tic".

$('select').selectpicker();

Additionally, make sure to delete the bootstrap-select.js file.

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

Guide to sending back a promise using JQuery

Here is the Durendal code I am working with: var variable = ko.observable(""); function activate(){ return myModel.doSomething(variable); } The doSomething function looks like this: function doSomething(variable){ if(someCondition) return ...

javascriptjqueryajaxdurandal

What are the potential disadvantages of relocating the login logic from the 'signIn()' function in NextAuth.js?

My experience with NextAuth.js for the first time has led me to realize that signing in using the Credentials provider can be a bit tricky when it comes to error handling. It seems like the default implementation should resemble something along these lines ...

javascriptnext.jsnext-authnext.js13

Guide on incorporating the ":gt" filter from sizzle into vanilla javascript

I am currently working on adapting a jQuery plugin to be compatible with the AngularJS JQlite API, but I have encountered some challenges along the way. Here is an overview of the plugin: (function (e) { var $product = $('#product'), ...

javascriptjqueryangularjs

Revamp your array elements with MongoDB - Substring replacement

Having some difficulty replacing a substring within various documents. Below is an example of one such document: { "images" : [ { "url" : "https://example/1234" }, { "url" : "https://example/afaef" }, { "url" : ...

javascriptjquerymongodbmongoose

Automated Copy and Paste Feature - JavaScript using Ajax

I am working on a unique auto-increment IMDB ID grabber that retrieves the ID as you type the name of a TV show. Currently, I have managed to create functionality where it checks if the field is empty; if not, it displays a button that directs you to a pag ...

javascriptjqueryajax

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

javascriptjquerycssdjangotwitter-bootstrap

Troubleshooting column alignment with Bootstrap4 and Angular: Resolving issues with text alignment on

Being relatively new to Bootstrap 4, as I have only used version 3.3 on my previous project which did not utilize the flexbox grid system. Now that I am embarking on a new project, I find myself facing a challenge: I am struggling to apply the "text-alig ...

htmlangularflexboxbootstrap-4

existing event handler in JavaScript has already been registered on a particular plugin

Apologies for the confusing title, will make changes accordingly.. Currently, I am utilizing the Twitter Bootstrap Wizard to manage database operations. My goal is to find a way to activate the onTabShow() function by simply clicking a button. The onTabSh ...

javascriptjquerytwitter-bootstrap

What are the reasons for the various methods available for importing my JS code?

Here is the structure of my folders: --public ----frontend.js --views ----fontend.ejs The frontend.js file is located inside the public folder, while the frontend.ejs file is in the views folder. In my HTML / EJS file, I included the JavaScript (fronten ...

javascripthtmlnode.jsejs

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

javascripthtml

Fulfill the promise within the $stateProvider and proceed with utilizing the outcomes

I am facing an issue where I need to resolve a promise in a state provider so that I can use the results of the promise in another promise. I am a bit unsure about how to go about this. I tried the following approach: app .config(['$stateProvid ...

javascriptangularjspromise

Tips for aligning an element vertically when it has a float using CSS or JavaScript

I am struggling with centering the image within the article list loop I created. The code snippet looks like this: <article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>"> <section class ...

javascriptjqueryhtmlcss

Checkbox radio buttons with mandatory selection

I'm facing a challenge with radio buttons in my form. While checkboxes could easily solve this issue, the customer specifically requested radio buttons. Here is the relevant section of the form: <label> <span>I Agree*</span> ...

javascriptangularjsformsng-required

Guide on displaying the value of an element in a Vue modal

I am working with a list of items displayed as <li> elements in a loop. When one of these elements is clicked, I would like a modal box to open up displaying specific content related to that particular element. The following data represents the item ...

javascriptvue.jsmodal-dialogvuejs2

Can you please explain the distinction between the statements var a = b = 2 and var a = 2; var b = 2;

Whenever I try to declare a variable within a function, I encounter an issue. var b = 44; function test(){ var a = b = 2; } However, the following code works without any problems: var b = 44; function test(){ var a; var b = 2; } The global ...

javascriptvariablesglobal-variables

Troubleshooting issue with file upload feature in Angular for Internet Explorer 9

I have implemented a file upload method using the following code: <input type="file" name="upload-file" ng-model= "excelFile" accept=".xlsx" onchange="angular.element(this).scope().fileChanged(this);" ...

javascriptangularjsinternet-explorer

Creating dynamic web content using PHP and JavaScript

I stumbled upon a tutorial on the PHP.net website within the "PHP and HTML" manual which includes an example titled Generating JavaScript with PHP. Currently, I am experimenting with a basic demo of this concept on my own to grasp the process before attem ...

phpjavascripthtmljson

Enhancing User Experience with AJAX Page Loading and Progress Tracker

I'm looking to create a jQuery AJAX page load with a progress bar displayed at the top. I came across a helpful example of what I have in mind here. Any tips on how to get started would be greatly appreciated. This will be implemented on a WordPress ...

javascriptajaxwordpressjquery

Tips for including a hashtag in an AJAX request

When using ajax to send messages to the server in my chat application, I encountered an issue where everything after a hashtag is omitted. I attempted to address this by encoding the message, but it resulted in other complications in the PHP code. The enco ...

javascriptphpajax

What steps should I take to resolve the "Module Not Found" issue that occurs when I use the command "npm start" after setting up a new React project with npm?

Just starting out with React.js and npm and encountered an issue. After using the command: npm create react-app my-test-npm-react-app I waited for the project to be created successfully. However, when I tried running: npm start I received the followin ...

javascriptreactjsnpmyarn-v2