CODEWITHSUNDEEP
javascripttwitter-bootstrapbootstrap-select
Many man
Many man

Reputation: 101

Bootstrap-select didnt show on page load

I'm trying to make a simple Bootstrap-select show up. But it doesn't show up.

When looking on the debugger, I saw that the display is none on the following line:

select.bs-select-hidden, select.selectpicker {
    display: none !important;
}

The point is I never added this class to my select. and would love to not see it in the debugger style window. It's the cause I think.

Here is the simple code:

<div class="input-group input-group-sm">                    
    <select class="selectpicker" id="event-name-ecom">
              <option value="addToCart" selected>Add To Cart</option>
              <option value="checkout">Checkout</option>
              <option value="removeFromCart">Remove From Cart</option>
              <option value="review" >Review</option>
              <option value="payment" >Payment</option>
              <option value="confirmation" >Confirmation Page</option>
    </select>
    <p class="bg-danger" id="event-required-ecom" style="margin-right: 25px; display: none"></p>
</div>

Any idea?

Upvotes: 10

Views: 12556

Answers (6)

Adnan Mohamed
Adnan Mohamed

Reputation: 75

The reason might be that you rendered the html code dynamically (i.e. the html was added after the page has been loaded). I had this issue when I used ajax to render some html to the fully loaded page.

The solution was to add $('.selectpicker').selectpicker(); in the success callback function.

Upvotes: 0

Van_Paitin
Van_Paitin

Reputation: 4248

Okay, so I discovered something about the way, bootstrap select works with React. When the select options depend on some React state, you want to call:

$('.selectpicker').selectpicker('refresh');

after you update the state.

Hope this helps

Upvotes: 1

Rachel Martin
Rachel Martin

Reputation: 537

This class is in the bootstrap-select.css file which you include to style the selectpicker control.

It looks like your control is not getting automatically picked up by the selectpicker initialization code because you should have the hidden select, followed by a button and a div that contains all the selectpicker data. This can happen the control is added to the page after the initial load. When this happens, you should go ahead an run this javascript to initialize the selectpicker:

$('.selectpicker').selectpicker();

Upvotes: 1

Vindhya p
Vindhya p

Reputation: 21

Use $(".selectpicker").selectpicker("refresh"); after your DOM is loaded.

$(document).ready(function() {
    $(".selectpicker").selectpicker("refresh");
});

Upvotes: 2

jyothsna
jyothsna

Reputation: 61

Even I faced a similar issue but couldn't find the reason for this behavior. Initializing the bootstrap select explicitly worked for me. Just do (".selectpicker").selectpicker(), after your dom is ready.

Upvotes: 6

trubliphone
trubliphone

Reputation: 4504

This is likely too late for the answer to be useful to the original poster. But in case anybody else has this issue, I was able to fix it by explicitly adding .selectpicker('render') to my code:

$(".selectpicker").selectpicker({
    "title": "Select Options"        
}).selectpicker("render");

Upvotes: 8

Related Questions