jQuery selectmenu not working with knockout.js when embedded inside a 'visible' binding

Question

I have a jsfiddle that demonstrates the problem at: http://jsfiddle.net/michaelajohnsonwa/sDchM/7/

The generated dropdown elements from the select when hidden don't seem to be generated correctly. I have tried using both the 'options' binding and the custom jqOptions binding. I tried added in .selectmenu('refresh') to the mix but there was no difference in the outcome. The custom binding doesn't work when used within a template binding which I also find curious.

I'm not sure if this is problem with jQuery selectmenu or knockout.js.

--edit: just discovered the working code doesn't work in IE. Chrome and Firefox do demonstrate the problem accurately.

Any help here will be appriciated! Thanks!!

Answer 1

Select Menu plugin will not work correctly in hidden elements, so it should be called like this.

if(obj.isVisible()) {
    $('#outterContainer').show();
    $('#broken2').selectmenu();
} 

EDIT: It happens because of the incorrect dimensions of the hidden element. So this can be fixed by giving the dimension of the select element.

$('#broken2').selectmenu({width:"200px"});

please see it : http://jsfiddle.net/diode/sDchM/17/