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 // --------------------------------------------------