Reworking remove buttons of filters using hidden field for data storage and siemens styles for layout.

assets/javascripts/reporting/filters.js

@@ -185,7 +185,7 @@ Reporting.Filters = {
       $('operators[' + dependents.first() + ']').value = 'any';
       Reporting.Filters.operator_changed(dependents.first(), $('operators[' + dependents.first() + ']'));
       // Hide remove box of dependent
-      $('rm_' + dependents.first()).hide();
+      $('rm_box_' + dependents.first()).hide();
       $('tr_' + dependents.first()).addClassName("no-border");
       // Remove border of dependent, so it "merges" with the filter before
       active_filters.unshift(dependents.first());

assets/stylesheets/reporting.css

@@ -169,20 +169,33 @@
   margin-right: 0px;
   background-image: url(../images/arrow_B_down.gif);
 }
+.remove-box {
+  height: 20px;
+  width: 20px;
+  background: white;
+  float: right;
+  padding: 1px 0 0 0;
+  display: block;
+  margin-top: -5px;
+  margin-right: -2px;
+}
 
 .filter_rem {
   color: transparent;
   overflow: hidden;
   cursor: pointer;
   background: no-repeat center center transparent;
-  height: 16px;
-  width: 16px;
+  height: 18px;
+  width: 18px;
   border-style: none;
+  display: block;
+  margin: 0 0 0 2px;
 }
 
 .icon-filter-rem {
-  background-image: url(../images/remove.png);
+  background-image: url(../images/close.gif);
   position: relative;
+  float:right;
 }
 
 .filter {
@@ -214,8 +227,7 @@ fieldset#filter-settings table td {
   border-color: white;
   border-style: solid;
   border-width: 2px 0px 0px;
-  padding: 2px;
-  vertical-align: middle;
+  padding: 5px 2px 5px 2px;
 }
 
 fieldset#filter-settings table .no-border td {

lib/widget/filters/remove_button.rb

@@ -1,9 +1,11 @@
 class Widget::Filters::RemoveButton < Widget::Filters::Base
   def render
     content_tag :td, :width => "25px" do
-      tag :input, :id => "rm_#{filter_class.underscore_name}",
-        :name => "fields[]", :type => "button", :value => "",
+      hidden_field = tag :input, :id => "rm_#{filter_class.underscore_name}",
+        :name => "fields[]", :type => "hidden", :value => ""
+      button = tag :input, :type => "button", :value => "",
         :class => "icon filter_rem icon-filter-rem"
+      content_tag(:div, hidden_field + button, :id => "rm_box_#{filter_class.underscore_name}", :class => "remove-box")
     end
   end
 end