Search jQuery

jQuery Forum

jQuery UI Multiselect not showing up correctly

in Getting Started • 1 year ago

I am using the "jQuery UI Multiselect" from http://quasipartikel.at/multiselect/

I need to have it inside a <div> set with "display: none;" from the start. The user then clicks a link and the <div> tag opens op.

The problem is that whenever I open the box the Multiselect does not show up correctly, it shows up as a 3pixel wide stick. You can see an example at: http://temp.eax.dk/eax.html

here is the eax.html code:

<link rel="stylesheet" href="css/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$(".multiselect").multiselect();
$('#coursesOpen').click(function(){
$('#edit_courses').css('display', "block");
});
});
</script>
<div id="coursesOpen"><a href="#">Open</a></div>
<div id="edit_courses" style="
position: absolute;
display: none;
background-color: #F2F2F2;
width: 700px;
border-style: solid;
border-width: 1px;
border-color: black;">
<form action="index.html">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="AND">Andorra</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AUT" selected="selected">Austria</option>
<option value="UZB">Uzbekistan</option>
<option value="VAT">Vatican City</option>
<option value="VNM">Vietnam</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
</div>