13

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?

hackingForward
  • 131
  • 1
  • 1
  • 4
  • Perhaps a CSS definition like `select { visibility:hidden; }`? – Malk Apr 23 '14 at 17:48
  • 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? – Intellidroid Apr 23 '14 at 18:18
  • Here's the page I'm trying to fix up: http://www.audioblocks.com/search/?srch-type=music There's not really much code. Render the page. Call selectpicker() function on the necessary select elements. – hackingForward Apr 25 '14 at 13:40

5 Answers5

9

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

select {
   visibility: hidden;
}
  • 1
    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;`. – Matt K Nov 20 '15 at 15:40
7

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

screenshot

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

Community
  • 1
  • 1
KyleMit
  • 30,350
  • 66
  • 462
  • 664
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

bart
  • 14,958
  • 21
  • 75
  • 105
2

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!

Alex
  • 315
  • 1
  • 6
  • 19
1

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).

BassGod
  • 151
  • 1
  • 11