CODEWITHSUNDEEP
jqueryhtmldropdownjquery-chosen
daredevil
daredevil

Reputation: 127

Chosen Multiselect dropdownlist loading issue

I am using ‘choosen-select’ for multiselect dropdown list.

I am facing a problem with dropdown list, initially while page loading the list displayed in enlarge form(All items are visible and no effect of chosen library)for some moment and then it regain the desired feel and shape of dropdown list.

Please find attached image of before and after page load. Attachment

Upvotes: 2

Views: 2475

Answers (2)

Master Yoda
Master Yoda

Reputation: 4422

Have you wrapped your script in the $(document).ready() function?

This should ensure that none of your scripts run until the page has been fully loaded.

Its possible that .chosen() is running before your page has even loaded the initial elements first.

More info here

$(document).ready(function()
{
  //following code used to generate 2000 items in the select element
  //in order to try and replicate the issue. 
  var counter = 2000;
  for( var i=1; i <= counter; i++ )
  {
    $(".chosen-select").append("<option> item " + i + "</option>");
  }

  //Initialise JQuery chosen library on select element 
  $(".chosen-select").chosen();
});
<!-- Links to external resources and JQuery 2.1.1 !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">

<!-- HTML !-->
<select multiple class="chosen-select"></select>

Also, make sure that you are referencing the JQuery library before you reference the chosen library in your markup.

Upvotes: 2

toffler
toffler

Reputation: 1233

You may hide it until the page is loaded?

CSS

#your-dropdown{
    display:none;
}

jQuery

$(window).load(function() {
  // When the page has loaded
  $("#your_dropdown").fadeIn(1000);
});

Upvotes: 0

Related Questions