fix(select): make select full width when with a stacked/floating label

if it is with a floating label, the label will stay stacked instead of floating closes #5715
ionic-team · Mar 9, 2016 · 4e37524 · 4e37524
1 parent 13b39b9
commit 4e37524
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 3 deletions.
diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss
@@ -40,6 +40,13 @@ $text-input-ios-input-clear-icon-size:     18px !default;
   margin-bottom: 8px;
 }
 
+.item-label-stacked ion-select,
+.item-label-floating ion-select {
+  padding-left: 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 .item-label-floating .text-input.cloned-input,
 .item-label-stacked .text-input.cloned-input {
   top: 30px;

diff --git a/ionic/components/input/input.md.scss b/ionic/components/input/input.md.scss
@@ -71,6 +71,13 @@ ion-input.ng-invalid.ng-touched:after {
   margin-bottom: 8px;
 }
 
+.item-label-stacked ion-select,
+.item-label-floating ion-select {
+  padding-left: 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 .item-label-floating .text-input.cloned-input {
   top: 32px;
 }

diff --git a/ionic/components/input/input.wp.scss b/ionic/components/input/input.wp.scss
@@ -69,6 +69,13 @@ ion-input.ng-invalid.ng-touched .text-input {
   margin-bottom: 8px;
 }
 
+.item-label-stacked ion-select,
+.item-label-floating ion-select {
+  padding-left: 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 .item-label-floating .text-input.cloned-input {
   top: 32px;
 }

diff --git a/ionic/components/input/test/stacked-labels/index.ts b/ionic/components/input/test/stacked-labels/index.ts
@@ -1,7 +1,14 @@
-import {App} from 'ionic-angular';
+import {App, Page} from 'ionic-angular';
 
 
 @App({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+class E2EApp {
+  rootPage = PageOne;
+}
+
+@Page({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class PageOne {}
diff --git a/ionic/components/input/test/stacked-labels/main.html b/ionic/components/input/test/stacked-labels/main.html
@@ -37,7 +37,10 @@
 
     <ion-item>
       <ion-label stacked>Label 6</ion-label>
-      <ion-input value="email6@email.com" type="email"></ion-input>
+      <ion-select [(ngModel)]="gender">
+        <ion-option value="f" checked="true">Female</ion-option>
+        <ion-option value="m">Male</ion-option>
+      </ion-select>
     </ion-item>
 
     <ion-item>

diff --git a/ionic/components/label/label.scss b/ionic/components/label/label.scss
@@ -48,3 +48,13 @@ ion-label[floating] {
   flex: 1;
   flex-direction: column;
 }
+
+.item-label-stacked ion-select,
+.item-label-floating ion-select {
+  width: 100%;
+  max-width: 100%;
+}
+
+.item-select ion-label[floating] {
+  transform: translate3d(0, 0, 0) scale(0.8);
+}