CODEWITHSUNDEEP
jqueryjquery-dropkick
jimplode
jimplode

Reputation: 3512

Jquery Dropkick within hidden element not displaying properly

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.

Upvotes: 0

Views: 576

Answers (2)

Rajender Joshi
Rajender Joshi

Reputation: 4205

Demo

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

Upvotes: 1

Dan
Dan

Reputation: 1111

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;

Upvotes: 1

Related Questions