title: jQuery miniColors colorpicker not positioned right
body: <p>I am using jQuery <a href="http://www.abeautifulsite.net/blog/2011/02/jQuery-minicolors-a-color-selector-for-input-controls/" rel="nofollow">miniColors colorpicker</a> but in the sample code the picker appears right next to the field and button, in my case it appears at the very bottom of my document, it is as if it can't read in the position data of the button calling it.</p>
  
  <p>Anyone had a similar issue with this plugin?</p>
  
  <p>Here is what my code looks like (before jQuery initializes this as a color-picker)</p>
  
  <pre><code>&lt;p style='position:absolute;top:0px;left:0px;margin-left:10px;'&gt;
      &lt;input type='text' class='color-picker miniColors' name='data_0' id='data_0' size='6' value='".$data[0]."' /&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>. And after I run this code on it.</p>
  
  <pre><code>$('#data_0').miniColors({
     change: function(hex, rgb) {     $('#slide_bg').css("background-color",hex); }   
  });
  </code></pre>
  
  <p>. It looks like this.</p>
  
  <pre><code>&lt;p style="position:absolute;top:0px;left:0px;margin-left:10px;"&gt;
  &lt;input type="text" class="color-picker miniColors" name="data_0" id="data_0" size="6" value="#ffffff" maxlength="7" autocomplete="off"&gt;
  
  &lt;span class="miniColors-triggerWrap"&gt;
  &lt;a class="miniColors-trigger" style="background-color: #ffffff" href="#"&gt;&lt;/a&gt;
  &lt;/span&gt;
  
  &lt;/p&gt;
  </code></pre>
  
  <p>. And the actual colorpicker gets inserted at the very last of my  (so right before the  and looks like this:</p>
  
  <pre><code>&lt;div class="miniColors-selector color-picker miniColors" style="left: 116px; "&gt;
      &lt;div class="miniColors-hues"&gt;
          &lt;div class="miniColors-huePicker" style="top: 0px; "&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="miniColors-colors" style="background-color: rgb(255, 0, 0); "&gt;
          &lt;div class="miniColors-colorPicker" style="top: -5px; left: -5px; "&gt;
              &lt;div class="miniColors-colorPicker-inner"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>. And appears below the footer of my page =(</p>
  
  <p>As you can see it has a value for left:116px but nothing for the vertical positioning.</p>