Fix clearSearch button raise an error when clicked.

[bouks]

https://github.com/openpsa/grid.js/pull/74#issuecomment-71231895

[bouks]

Added fix to discovered bug, see commit d32b3b6 above.

[bouks]

Bug found in 9d3cbf4 reported here :

https://github.com/openpsa/grid.js/issues/79

[bouks]

@flack fixed your remarks

[flack]

@bouks I just merged this locally and tested, but it still doesn't display properly on my machine (FF 35 / Mac OS 10.9):

[bouks]

It seems (in my experience) that font rendering is not the same on mac. Can you test changing the "- 20" here :

https://github.com/bouks/grid.js/commit/4f86672e6ed0c0cd6f7e749c58f35e0a9fbb0595#diff-b00cd3167597a03d096b6f2a33e604b7R655

(mac is the evil, but i think you know it) :)

[flack]

OK, I will play around with it a little.

I don't usually use search filter, but I wonder: Is it normal that the clear icon is set to display: none in the demo without operators?

[bouks]

Fixed

[flack]

I think I've found a way to do this without hardcoding any pixel value and without resizeFilterToolbarInput:

.ui-search-toolbar
{
    padding: 2px 5px;
    display: table-row;

    .ui-search-box > *{
        display: table-cell
    }

    .ui-search-oper
    {
        width: 20px;
        padding-right: 0.5em;
    }
    .ui-search-input
    {
        & > input,
        & > select
        {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
        }
    }
}

The only problem is, something in the Javascript sets width: 75px on each of the inputs. This will have to be removed for the CSS above to work, but I couldn't find it so far. @bouks Could you try the less above on your machine and see if it looks ok?

EDIT: fixed copy n paste problems in the snippet

[flack]

Here again as diff against current HEAD for better readability

index 7027072..0a92888 100644
--- a/less/search.less
+++ b/less/search.less
@@ -1,11 +1,12 @@
 .ui-search-toolbar
 {
     padding: 2px 5px;
-    
-    .ui search-box > *{
-       display: inline-block;
+    display: table-row;
+
+    .ui-search-box > *{
+        display: table-cell
     }
-    
+
     .ui-search-oper
     {
        width: 20px;
@@ -19,9 +20,6 @@
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
-       }
-       & > select
-       {
            width: 100%;
        }
     }