fix(RTL): Put filter cancel on left for RTL

Filter cancel button was on the right in RTL grids, overlaying text. Fixes angular-ui#2058
jpuri · Dec 2, 2014 · 01189c1 · 01189c1
1 parent e429395
commit 01189c1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/less/header.less b/src/less/header.less
@@ -143,7 +143,7 @@
     bottom: 0;
     right: 0;
 
-    [class^="ui-grid-icon"].right {
+    [class^="ui-grid-icon"] {
       position: absolute;
       top: 50%;
       line-height: 32px;
@@ -158,6 +158,17 @@
   }
 }
 
+// Position filter-cancel button on the left for rtl grids
+.ui-grid[dir="rtl"] .ui-grid-filter-container .ui-grid-filter-button {
+  right: initial;
+  left: 0;
+
+  [class^="ui-grid-icon"].right {
+    right: initial;
+    left: 10px;
+  }
+}
+
 input[type="text"].ui-grid-filter-input {
   padding: 0;
   margin: 0;

diff --git a/src/templates/ui-grid/uiGridHeaderCell.html b/src/templates/ui-grid/uiGridHeaderCell.html
@@ -16,7 +16,7 @@
     <input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" />
 
     <div class="ui-grid-filter-button" ng-click="colFilter.term = null">
-      <i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term">&nbsp;</i> <!-- use !! because angular interprets 'f' as false -->
+      <i class="ui-grid-icon-cancel" ng-show="!!colFilter.term">&nbsp;</i> <!-- use !! because angular interprets 'f' as false -->
     </div>
   </div>
 </div>