title: jquery multiselect inside knockout modal dialog auto open positioning wrong
body: <p>I've got a little of a brain bender going here:</p>
  
  <p>Basically, what I am trying to do is render a nice, searchable checkbox list as an alternative  UI to a select2 control.  Basically, my user hits an "add many" button, a modal dialog pops open and they pick their options.  I'm using the jquery multi select widget with a knockout binding handler i found.  it seems to work well, but I want the box to open by default so that it looks more like a classic .net checkboxlist... So, I pass the autoOpen: true to the multiselect but it iss opening in the top right corner of the dom instead of aligned with the multiselect text.  If you click the multiselect text, and click it again, presto change columbo oreo -- it opens in the right position!</p>
  
  <p>I believe what is happening is that on load my box has already rendered its just off the screen with the modal.  So when the I open the modal, its moving to the screen but in a bad position, i.e. no where near the button.  </p>
  
  <p>What I think I should be doing is calling something like:</p>
  
  <pre><code>$('.selector').multiselect({ show: 'fadeIn' }); 
  </code></pre>
  
  <p>or something to that effect once the modal has already loaded so the position will be correct.  However, I have no idea how to do that with knockout.  Any help would be greatly appreciated -- I've matched the effort by painstakingly recreating the problem in this fiddle ;):</p>
  
  <p>Here is how my modal looks now and a link to my fiddle...</p>
  
  <pre><code>&lt;div data-bind="modal: AddManyItem"&gt;
  &lt;div class="modal-header"&gt; &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
  
       &lt;h3&gt;Add Many&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      &lt;select data-bind="multiSelectCheck: $data.Opts, 
                              multiselectOptions: 
                              { autoOpen: true },
                              optionsCaption: 'Check one or more', 
                              selectedOptions: $data.Vals, 
                              optionsText: 'Text'" multiple="multiple"&gt;&lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt; &lt;a href="#" class="btn btn-primary" &gt;Save changes&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>See JSFiddle: <a href="http://jsfiddle.net/valvemail/W7E5N/15/" rel="nofollow">http://jsfiddle.net/valvemail/W7E5N/15/</a></p>
  
  <p>One more note -- this is a bootstrap modal if that makes a difference.</p>