Jquery Dropkick within hidden element not displaying properly

Question

I have a problem when using dropkick within a hidden element.

I have mocked up a demo here: http://jsfiddle.net/C6NuL/

HTML

<p>It should look similar to this</p>
<div>
    <select class="dropkick">
        <option>Option&nbsp;One</option>
        <option>Option&nbsp;Two</option>
        <option>Option&nbsp;Three</option>
        <option>Option&nbsp;Four</option>
        <option>Option&nbsp;Five</option>
    </select>
</div>
<div style="clear:both;">
<a href="#" onclick="$('#selectDiv').slideDown(500);return false;">click me</a> 
</div>
<div id="selectDiv" style="display:none;">
    <p>But it ends up looking like this</p>
    <select class="dropkick">
        <option>Option&nbsp;One</option>
        <option>Option&nbsp;Two</option>
        <option>Option&nbsp;Three</option>
        <option>Option&nbsp;Four</option>
        <option>Option&nbsp;Five</option>
    </select>
</div>

JQuery

$(document).ready(function(){
    $('.dropkick').dropkick();
});

The issue is simply that when using dropkick on select lists within a hidden element it does not display correctly on showing said hidden element.

Can anyone explain what is going on, or how I may fix this issue?

I am sure it has something to do with hidden elements not having a width, but have no idea how to fix it.

Any help will be awesome.

Answer 1

You would need to apply the dropkick after you show the parent element for dropkick to calculate its width correctly, it would working something like this in your click or whatever function makes your element visible:

$('#selectDiv').slideDown(500);
$('.dropkick').dropkick();
return false;

Answer 2

Demo

$(document).ready(function(){
    $('.dropkick').dropkick();
    $('#selectDiv').hide();
});