diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss
index c95d93bb55..6062b319ef 100644
--- a/ionic/components/input/input.ios.scss
+++ b/ionic/components/input/input.ios.scss
@@ -33,8 +33,9 @@ $text-input-ios-input-clear-icon-size: 18px !default;
// iOS Stacked & Floating Inputs
// --------------------------------------------------
-.stacked-input,
-.floating-input {
+.item-label-stacked .text-input,
+.item-label-floating .text-input {
+ margin-left: 0;
margin-top: 8px;
margin-bottom: 8px;
}
diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss
index 357cdfb67a..68e83a3fa9 100644
--- a/ionic/components/input/input.md.scss
+++ b/ionic/components/input/input.md.scss
@@ -64,8 +64,8 @@ ion-input.ng-invalid.ng-touched:after {
// Material Design Stacked & Floating Inputs
// --------------------------------------------------
-.stacked-input,
-.floating-input {
+.item-label-stacked .text-input,
+.item-label-floating .text-input {
margin-left: 0;
margin-top: 8px;
margin-bottom: 8px;
diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss
index 073a86aaec..4e83f603c6 100644
--- a/ionic/components/input/input.scss
+++ b/ionic/components/input/input.scss
@@ -35,6 +35,10 @@ ion-textarea {
@include placeholder();
}
+textarea.text-input {
+ display: block;
+}
+
input.text-input:-webkit-autofill {
background-color: transparent;
@@ -109,4 +113,4 @@ input.text-input:-webkit-autofill {
position: absolute;
top: 0;
pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/ionic/components/input/input.ts b/ionic/components/input/input.ts
index 763d905435..3db192ea87 100644
--- a/ionic/components/input/input.ts
+++ b/ionic/components/input/input.ts
@@ -222,6 +222,8 @@ export class TextInputBase {
this.onTouched(textInputHasFocus);
}
});
+
+ this.checkHasValue(nativeInput.getValue());
}
/**
diff --git a/ionic/components/input/native-input.ts b/ionic/components/input/native-input.ts
index 16bed35236..55df00643c 100644
--- a/ionic/components/input/native-input.ts
+++ b/ionic/components/input/native-input.ts
@@ -113,6 +113,10 @@ export class NativeInput {
return hasFocus(this.element());
}
+ getValue(): string {
+ return this.element().value;
+ }
+
/**
* @private
*/
diff --git a/ionic/components/input/test/form-inputs/main.html b/ionic/components/input/test/form-inputs/main.html
index c010237b79..6efa711fe3 100644
--- a/ionic/components/input/test/form-inputs/main.html
+++ b/ionic/components/input/test/form-inputs/main.html
@@ -1,5 +1,5 @@
-Inline Label Text Input
+Form Inputs
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 0ea7f6823e..37f43a28ef 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -62,7 +62,6 @@ ion-item-divider {
ion-label {
margin: 0;
- flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss
index b9b904c128..c07280e7b6 100644
--- a/ionic/components/label/label.ios.scss
+++ b/ionic/components/label/label.ios.scss
@@ -22,7 +22,7 @@ ion-label {
color: $label-ios-text-color;
}
-.item-input ion-label + .item-input {
+ion-label + ion-input .text-input {
margin-left: $item-ios-padding-left;
}
@@ -30,28 +30,23 @@ ion-label {
// iOS Stacked & Floating Labels
// --------------------------------------------------
-.stacked-label {
+ion-label[stacked] {
font-size: 1.2rem;
margin-bottom: 4px;
}
-.floating-label {
+ion-label[floating] {
margin-bottom: 0;
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
-.input-has-focus .floating-label,
-.input-has-value .floating-label {
+.input-has-focus ion-label[floating],
+.input-has-value ion-label[floating] {
transform: translate3d(0, 0, 0) scale(0.8);
}
-.item-input ion-label + .stacked-input,
-.item-input ion-label + .floating-input {
- margin-left: 0;
-}
-
// Generate iOS Label colors
// --------------------------------------------------
diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss
index d98fae4d58..78609f2dc1 100644
--- a/ionic/components/label/label.md.scss
+++ b/ionic/components/label/label.md.scss
@@ -25,32 +25,32 @@ ion-label {
}
-// Material Design Stacked & Floating Labela
+// Material Design Stacked & Floating Labels
// --------------------------------------------------
-.stacked-label {
+ion-label[stacked] {
font-size: 1.2rem;
}
-.floating-label {
+ion-label[floating] {
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
-.stacked-label,
-.floating-label {
+ion-label[stacked],
+ion-label[floating] {
margin-left: 0;
margin-bottom: 0;
}
-.input-has-focus .stacked-label,
-.input-has-focus .floating-label {
+.input-has-focus ion-label[stacked],
+.input-has-focus ion-label[floating] {
color: $label-md-text-color-focused;
}
-.input-has-focus .floating-label,
-.input-has-value .floating-label {
+.input-has-focus ion-label[floating],
+.input-has-value ion-label[floating] {
transform: translate3d(0, 0, 0) scale(0.8);
}
diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss
index 5add0dd4e1..7aedbed7ad 100644
--- a/ionic/components/label/label.scss
+++ b/ionic/components/label/label.scss
@@ -20,7 +20,7 @@ ion-label {
// --------------------------------------------------
ion-label[fixed] {
- flex: 0;
+ flex: 0 0 30%;
width: 30%;
min-width: 100px;
max-width: 200px;
diff --git a/ionic/components/list/list.md.scss b/ionic/components/list/list.md.scss
index 3820ee78bb..68ed986f4b 100644
--- a/ionic/components/list/list.md.scss
+++ b/ionic/components/list/list.md.scss
@@ -116,13 +116,9 @@ ion-list[inset] {
border-bottom-left-radius: $list-inset-md-border-radius;
}
- ion-input.item {
+ .item-input {
padding-right: 0;
padding-left: 0;
-
- &:after {
- left: 0;
- }
}
+ ion-list[inset] {