Fixed "fixed header" example for FF.

I'm sick and tired of trying to make this work cross-browser.
Box-sizing FTW, which means that this example no longer displays
correct in IE7.  Oh well, this is just an example.

1 files changed, 9 insertions, 2 deletions

diff --git a/examples/example-header-row.html b/examples/example-header-row.html
index 400a9d7..d5d64ca 100644
--- a/examples/example-header-row.html
+++ b/examples/example-header-row.html
@@ -8,11 +8,18 @@
   <style>
     .slick-headerrow-column {
       background: #87ceeb;
+      text-overflow: clip;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
     }
 
     .slick-headerrow-column input {
       margin: 0;
       padding: 0;
+      width: 100%;
+      height: 100%;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
     }
   </style>
 </head>
@@ -47,7 +54,8 @@
   var data = [];
   var options = {
     enableCellNavigation: true,
-    showHeaderRow: true
+    showHeaderRow: true,
+    headerRowHeight: 30
   };
   var columns = [];
   var columnFilters = {};
@@ -69,7 +77,6 @@
         $(header).empty();
         $("<input type='text'>")
             .data("columnId", columns[i].id)
-            .width($(header).width() - 4)
             .val(columnFilters[columns[i].id])
             .appendTo(header);
       }