The list style of Bootstrap Select Drop Down isn't vertical

Has anyone encountered an issue with bootstrap-select where the options in a drop down box are not vertically listed?

    <script src="{% static 'risk_parity/js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'risk_parity/js/bootstrap.min.js' %}"></script>
    <link href="{% static 'risk_parity/css/bootstrap.min.css' %}" rel="stylesheet">


    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>



    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

    <select class="selectpicker" >
                        <option>USA</option>
                        <option>CA</option>                     
                    </select>


<script>

    $(document).ready(function(){           
        $('.selectpicker').selectpicker();
    });

</script>

Not Vertically Listed

Answer №1

Below is the solution that is functioning perfectly. It appears that the issue may arise from modifications made to bootstrap's default CSS or the addition of inline CSS.

$(document).ready(function(){           
    $('.selectpicker').selectpicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

    <select class="selectpicker" >
       <option>USA</option>
       <option>CA</option>                     
    </select>

Please inform me if this solution does not work for you.

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

Choose a child using react material ui's makeStyles

Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

// Custom Cart Code for Database Quantity Update $('.input-text').on('keydown ' , function(){ var tr_parent = $(this).closest("tr"); setTimeout(function () { $(tr_parent).css('opacity', '0.3'); }, 4000); var i ...

Align the middle row using CSS Grids

I am working on creating a grid layout with a size of 4x3, and I would like the second row to be centered as the top row contains four elements. Here is an example of what I am trying to achieve: https://i.sstatic.net/FnN7s.png Check out the demo code b ...

What is the best way to show a border-left outside of the list marker in Internet Explorer 8?

I have a numbered list that I would like to add a left border to. <ol class="steps"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <ol> .steps {border-left: 5px double #7ab800;} When viewing in Fir ...

What is the best way to incorporate a style attribute into my EJS page content?

Having trouble with adding custom style. It seems to work, but there's an error displayed. Apologies for my poor english :( <div class="card card_applicant"> <div class="card_title" style="background-c ...

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

I'm having trouble with aligning my sidebar vertically between the header and the bottom of the browser window. Currently, the bottom items are extending beyond the browser's bottom edge. How can I adjust this to ensure proper alignment? Here is ...

How can I set the width of a container dynamically using the Next JS Image component?

I have a situation where I am trying to set the height of an image within a container div to be equal to 100% of the container's height, while allowing the width of the container to adjust based on the image's aspect ratio. When using a standard ...

Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover; Second step: background-size: contain; background-repeat: no-repeat; The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat Currently, my HTML incl ...

Interact with one div to trigger changes in another (CSS)

I successfully influenced the style of one div when hovering over another div using the "+" selector, but I would prefer to find a different solution. My goal is for this interaction to work even if the .h div and the .t div are located in separate parent ...

Is it recommended to place JavaScript/CSS at the bottom of an HTML document?

I am currently utilizing jQuery Mobile, and at the moment, my <head> section looks like this: <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <title>help</title> <link ...

Aligning Checkbox Labels for Web Forms

Can an image convey more than a thousand words? I'm looking to align the second (and following) lines with the first one. Any suggestions? Html stands for <input><span>text</span> ...

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

href not functioning properly on subsequent clicks, whereas onclick remains active

I'm experiencing an issue with a button that opens a modal. When clicking the button, it's supposed to open a new page in the modal and also make an API call for processing before loading the new page. <a class="btn btn-primary" type='b ...

Using string literals in Vue and HTML classes

When a user attempts to log in with the wrong password, I want multiple alert popups to appear on the UI instead of just one. This will help the user understand if they are still entering the incorrect password. To achieve this, I decided to use a counter ...

Divide Footer Information into Two Sections: Left and Right

<footer> <div class="copyrights-left"> <p>&copy 2015. <a style="color: #fff;" href="index.html">Free Xbox Live Gold Membership and Free Xbox Live Gold Codes</a>. All rights reserved.</p></div> <div class="co ...

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

Can you provide any instances of CSS 3D Transforms being utilized in real-world projects besides and ? ...

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...

When using position:sticky, the overflow:auto behavior may not function as intended

My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...

Techniques and Strategies for showcasing several images in close proximity

I am looking to arrange dummy images in a row next to each other, similar to the example shown here: https://i.sstatic.net/HUUGz.png Since my CSS skills are not very strong, I am seeking guidance on the proper way to achieve this. The images I have are a ...

What's the reason for the inability to resize fieldset using both?

Can someone explain why the resize control is not enabled on the fieldset element? The documentation mentions that resize does not work with: Inline elements Block elements that have overflow set to visible fieldset { resize: both; overflow: h ...