Bootstrap-select plugin: how to avoid flickering

Question

The Bootsrap-select plugin is amazing (http://silviomoreto.github.io/bootstrap-select/). It provides an extremely easy way of creating gorgeous select menus in Bootstrap. The one problem I've encountered with it, however, is "flickering" on page load. What I mean by this is fairly straight forward:

1. The page loads with original HTML select element (which of course looks like crap)
2. The Bootstrap-select plugin JS runs
3. At some noticeable time after the page loads the original HTML select element is converted to a nice Bootstrap-select element by JS in Step (2).

So, the user first sees the HTML select element and then sees it switch to the pretty Bootstrap-select item, thus the "flickering".

Has anyone found a good solution to the problem?

Radiolocation

Perhaps a CSS definition like select { visibility:hidden; }? – Chesson

Are you able to post your code for it? As looking at the site (apart from the js etc...) you are just creating a select element with his custom class? – Ramshackle

Here's the page I'm trying to fix up: audioblocks.com/search/?srch-type=music There's not really much code. Render the page. Call selectpicker() function on the necessary select elements. – Radiolocation

Answer 1

To show a blank until bootstrap-select is loaded, add this to your css.

select {
   visibility: hidden;
}

Charlottecharlottenburg

In my case the select was actually shifting its position after Bootstrap kicked in and affecting the elements around it so visibility: hidden; wasn't enough to mask the effect. I had to hide it completely using display: none;. – Gouda

Answer 2

There's not a great way to prevent the flickering all together, but you can minimize it.

The problem is that in addition to whatever other bottlenecks you have, you have to download and parse a lot of javascript files first. Bootstrap-Select depends on Bootstrap which itself depends on jQuery. By the time all that javascript is loaded, the page is probably already rendered.

One thing you can do to minimize the flickering is to style the select elements as similar to the final product as possible so they take the same amount of screen space. When the plugin loads, it will hide this control anyway and replace it with it's own implementation. Use the selector that you were going to pass into the selectpicker() function and style like this:

.selectpicker {
    width: 220px;
    height:34px;
    margin-bottom: 10px;
}

Working Demo in fiddle

Note: I've intentionally delayed the load time by using setTimeout so the difference is more noticeable.

setTimeout(function() { $(".selectpicker").selectpicker(); }, 500);

---

If that's really still not acceptable, you can display a loading graphic until the page is fully loaded.
Adapted from Loading screen example:

Add this to your HTML:

<div id="loader"></div> 

Style it like this in CSS:

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://i.imgur.com/ntIrgYXs.gif') 50% 50% no-repeat grey;
}

And remove it with the following JavaScript after you've loaded your page:

$("#loader").fadeOut("slow");

Working Demo Of Loading Screen In Fiddle

Clodhopper

Thanks! I'm going to test this out. – Radiolocation

@user3565737, also remember to upvote any answers you find helpful and accept any answers that best solve your problem for this and other posts on Stack Overflow. – Clodhopper

Current fix for Bootstrap 4.5 and bootstrap-select 1.13.* is height: 38px; – Edp

Answer 3

Use size to limit the height of the select, before it is being replaced:

<select size="1">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

The spec around this attribute says:

'size' Defines the number of visible options in a drop-down list

Beatnik

It does the job really well :D – Stu

Answer 4

This solution works for me:

<select class="selectpicker">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

<script>
    $('.selectpicker').selectpicker({  
        width: '100%'
    });
</script>

I just place the script right after the creation of the select drop-down, instead of waiting for the document to be ready!

Filippa

Answer 5

The best and most simple answer:

Add the existing Bootstrap class invisible to your Select object on the markup page, whether it's an HTML Input element or HTML Select element: https://getbootstrap.com/docs/5.1/utilities/visibility/

e.g.

<input class="visible">...</div>
<input class="invisible">...</div>

This prevents the HTML version of the Select/DDL from being visible to the user, while reserving the space in the layout that the SELECT would take up (which is rendered in once the bootstrap-select JS is initialized).

Accumulator