title: display jquery color picker on top rather than bottom
body: <p>I am using <a href="http://colpick.com/" rel="nofollow noreferrer">this</a> Color Picker plugin, it seems to be appearing alright but all i want is to make it appear on top of field rather than bottom. This is what it looks like</p>
  
  <p><img src="https://i.stack.imgur.com/x3JQD.png" alt="enter image description here"></p>
  
  <p>This is my html field </p>
  
  <pre><code>&lt;input type="text" name="slide_background" class="form-control" placeholder="Choose background color" id="picker"&gt;
  </code></pre>
  
  <p>and this is my <code>JavaScript</code></p>
  
  <pre><code>&lt;script&gt;
      $(function ($) {
          $('#picker').colpick({
              layout:'hex',
              submit:0,
              colorScheme:'dark',
              onChange:function(hsb,hex,rgb,el,bySetColor) {
                  $(el).css('border-color','#'+hex);
                  if(!bySetColor) $(el).val(hex);
              }
          }).keyup(function(){
              $(this).colpickSetColor(this.value);
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I will really appreciate if anyone can assist me in this.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Following css fixed it for me</p>
  
  <pre><code>.colpick_hex { 
  margin-top: -235px !important;
  }
  </code></pre>