Counteract a bootstrap / select2 rendering delay?

Question

I'm using bootstrap on a site, and using the following code on load to turn my select boxes into select2 dropdowns

$("select").select2();

However when any page with a select dropdown loads, there's a brief delay where the original can be seen before the select2 replacement is drawn in. This is quite jarring as elements of the forms on my pages move around.

Is there a way to generate the select2 HTML in my backend (ASP MVC3) and write it out to the page in such a way that the select2 plugin will still hook up all the behaviours correctly?

Answer 1

I went for a slighly simpler answer. All form elements now have style='display:none;'. On page load I simply do $('form').show()

This is at the end of any select2 commands, so the form only appears when everything else has been rendered.

In the case of lazy loaded table rows with checkboxes, I set style='display:none;' on the checkboxes and then have them show when loading is finished for a particular 'page' of results.

Answer 2

Here's a similar question on preventing flickering with Bootstrap-Select.

The fact is that a Flash of Unstyled Content (FOUC) is going to happen anytime that JavaScript is running on the client after the page has rendered and changes the appearance of the page. You're best bet is to just minimize the changes ahead of time.

The heavy handed approach would be to wait to display the page until all the scripts have run, but this is much worse for users.

As Roryok suggested, the best way to mitigate this issue is to style the appearance of the native element as close as possible to the plugin control.

To do that, just add the following css to any select element which will be applied before the javascript renders the control.

/* apply styles to original select element before hidden */
select.select2{
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}

Demo in Stack Snippets

$('.select2').select2();

body {
  display: flex;
  flex-direction: row;
}

div {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
}

select {
  min-width: 150px;
}

.select2-theme {
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>


<div >
  <label>Select 2</label>
  <select class="select2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>

</div>

<div>
  <label>Select2 Themed</label>
  <select class="select2-theme">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

<div>
  <label>Default Select</label>
  <select >
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>  
</div>