diff --git a/ionic/components/input/test/floating-labels/main.html b/ionic/components/input/test/floating-labels/main.html
index 50615c6ada..f0f143c3ca 100644
--- a/ionic/components/input/test/floating-labels/main.html
+++ b/ionic/components/input/test/floating-labels/main.html
@@ -3,17 +3,15 @@
-
-
-
- Params
-
- {{ myParam }}
-
-
-
+
-
+
+ Params: {{ myParam }}
+
+
+
Floating Label 1: {{ myValues.value1 }}
@@ -33,6 +31,9 @@
Floating Label 4: {{ myValues.value2 }}
+
@@ -43,11 +44,17 @@
Floating Label 6
+
+
+
Floating Label 7
+
+
+
@@ -68,3 +75,9 @@
+
+
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index e07ef5bea5..6c1ba77bc2 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -38,6 +38,16 @@
align-self: stretch;
}
+.input-wrapper {
+ display: flex;
+ flex: 1;
+ flex-direction: inherit;
+ align-items: inherit;
+ align-self: stretch;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
.item[no-lines],
.item[no-lines] .item-inner {
border: none;
diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
index 2071aeed27..96745a2c2a 100644
--- a/ionic/components/item/item.ts
+++ b/ionic/components/item/item.ts
@@ -44,11 +44,14 @@ import {Label} from '../label/label';
template:
'' +
'
' +
- '
' +
- '
' +
- ''+
- '' +
- '
' +
+ '
' +
+ '' +
+ '' +
+ ''+
+ '' +
+ '' +
+ '
' +
+ '
' +
'
' +
'',
host: {
diff --git a/ionic/components/label/label.ios.scss b/ionic/components/label/label.ios.scss
index 8506c7ab45..24404550f6 100644
--- a/ionic/components/label/label.ios.scss
+++ b/ionic/components/label/label.ios.scss
@@ -50,6 +50,11 @@ ion-label[floating] {
transform: translate3d(0, 0, 0) scale(0.8);
}
+.item-label-stacked [item-right],
+.item-label-floating [item-right] {
+ margin-top: $item-ios-padding-media-top + 2;
+}
+
// Generate iOS Label colors
// --------------------------------------------------
diff --git a/ionic/components/label/label.md.scss b/ionic/components/label/label.md.scss
index 86d48063e3..15944f41aa 100644
--- a/ionic/components/label/label.md.scss
+++ b/ionic/components/label/label.md.scss
@@ -58,6 +58,11 @@ ion-label[floating] {
transform: translate3d(0, 0, 0) scale(0.8);
}
+.item-label-stacked [item-right],
+.item-label-floating [item-right] {
+ margin-top: $item-md-padding-media-top + 2;
+}
+
// Generate Material Design Label colors
// --------------------------------------------------
diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss
index 36824a2268..a55fd83e9a 100644
--- a/ionic/components/label/label.scss
+++ b/ionic/components/label/label.scss
@@ -28,33 +28,23 @@ ion-label {
// --------------------------------------------------
ion-label[fixed] {
- flex: 0 0 30%;
- width: 30%;
+ flex: 0 0 100px;
+ width: 100px;
min-width: 100px;
max-width: 200px;
}
-.item-label-stacked .item-inner,
-.item-label-floating .item-inner {
- flex-wrap: wrap;
-}
-
-.item-label-stacked [item-right],
-.item-label-floating [item-right] {
- margin-top: 0;
- margin-bottom: 0;
-}
-
ion-label[stacked],
ion-label[floating] {
align-self: stretch;
margin-bottom: 0;
max-width: 100%;
flex-basis: 100%;
-}
-
-ion-label[stacked],
-ion-label[floating] {
- align-self: stretch;
width: auto;
}
+
+.item-label-stacked .input-wrapper,
+.item-label-floating .input-wrapper {
+ flex: 1;
+ flex-direction: column;
+}
diff --git a/ionic/components/label/label.wp.scss b/ionic/components/label/label.wp.scss
index eb01eb6eaf..ace0c762af 100644
--- a/ionic/components/label/label.wp.scss
+++ b/ionic/components/label/label.wp.scss
@@ -52,6 +52,11 @@ ion-label[floating] {
transform: translate3d(0, 0, 0) scale(0.8);
}
+.item-label-stacked [item-right],
+.item-label-floating [item-right] {
+ margin-top: $item-wp-padding-media-top + 2;
+}
+
// Generate Windows Label colors
// --------------------------------------------------