<%= render :partial => 'shared/form_errors', :locals => {:object => @reading} %>

<div class="form-group">
  <%= f.label :label, class: 'control-label' %><br>
  <%= f.text_field :label, class: 'form-control' %>
</div>

<div class="form-group">
  <%= f.label :grade, class: 'control-label' %><br>
  <%= f.text_field :grade, class: 'form-control' %>
</div>

<div class="form-group">
  <%= f.label :color, class: 'control-label' %><br>
  <div class="input-append" id="color_div">
    <%= f.text_field :color, class: 'form-control' %>
    <input type="button" class="btn btn-info" id="pickcolor_button" value="Pick color"></input>
  </div>
</div>

<script>
  options = {
    trigger_event: "click",
    color: {
      r: 0,
      g: 0,
      b: 0
    },
    onChange: function(colorHSB) {
      // Get first children "eq(0)" of #color_div with type "input"
      $("#color_div").children("input").eq(0).val(colorHSB.toHex());
    }
  }
  new ColorPicker($("#pickcolor_button"), options);
</script>

<%= f.submit 'Save', class: 'btn btn-primary' %>
<%= render :partial => 'shared/form_errors', :locals => {:object => @reading} %>

<div class="form-group">
  <%= f.label :label, class: 'control-label' %><br>
  <%= f.text_field :label, class: 'form-control' %>
</div>

<div class="form-group">
  <%= f.label :grade, class: 'control-label' %><br>
  <%= f.text_field :grade, class: 'form-control' %>
</div>

<div class="form-group">
  <%= f.label :color, class: 'control-label' %><br>
  <div class="input-append" id="color_div">
    <%= f.text_field :color, class: 'form-control' %>
    <input type="button" class="btn btn-info" style="padding: 5px" id="pickcolor_button" value="Pick color"></input>
  </div>
</div>

<script>
  options = {
    trigger_event: "click",
    color: {
      r: 0,
      g: 0,
      b: 0
    },
    onChange: function(colorHSB) {
      // Get first children "eq(0)" of #color_div with type "input"
      $("#color_div").children("input").eq(0).val(colorHSB.toHex());
    }
  }
  new ColorPicker($("#pickcolor_button"), options);
</script>

<%= f.submit 'Save', class: 'btn btn-primary' %>

Fix Pick color button size
Fix Pick color button size

Now it matches the field height
