fix(input): fix the clear input button to always be vertically aligned

ionic-team · Jun 27, 2016 · e4cc672 · e4cc672
1 parent 4567de2
commit e4cc672
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 7 deletions.
diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss
@@ -77,7 +77,6 @@ ion-input[clearInput] {
   @include svg-background-image($text-input-ios-input-clear-icon-svg);
 
   right: ($item-ios-padding-right / 2);
-  bottom: 0;
 
   width: $text-input-ios-input-clear-icon-width;
 

diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss
@@ -130,7 +130,6 @@ ion-input[clearInput] {
   @include svg-background-image($text-input-md-input-clear-icon-svg);
 
   right: ($item-md-padding-right / 2);
-  bottom: 4px;
 
   width: $text-input-md-input-clear-icon-width;
 

diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -129,11 +129,14 @@ input.text-input:-webkit-autofill {
 
 .text-input-clear-icon {
   position: absolute;
+  top: 0;
   display: none;
 
   margin: 0;
   padding: 0;
 
+  height: 100%;
+
   background-repeat: no-repeat;
   background-position: center;
 }

diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss
@@ -107,7 +107,6 @@ ion-input[clearInput] {
 .text-input-clear-icon {
   @include svg-background-image($text-input-wp-input-clear-icon-svg);
 
-  top: $item-wp-padding-top;
   right: ($item-wp-padding-right / 2);
 
   width: $text-input-wp-input-clear-icon-width;

diff --git a/src/components/input/test/clear-input/e2e.ts b/src/components/input/test/clear-input/e2e.ts
@@ -1,4 +0,0 @@
-
-it('should clear input', function() {
-  element(by.css('.e2eClearInput .text-input-clear-icon')).click();
-});