From 4e375242c6a0c4914e35c0e4422e3f21e6f65f7f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Mar 2016 15:53:13 -0500
Subject: [PATCH] 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/components/input/input.ios.scss                |  7 +++++++
 ionic/components/input/input.md.scss                 |  7 +++++++
 ionic/components/input/input.wp.scss                 |  7 +++++++
 ionic/components/input/test/stacked-labels/index.ts  | 11 +++++++++--
 ionic/components/input/test/stacked-labels/main.html |  5 ++++-
 ionic/components/label/label.scss                    | 10 ++++++++++
 6 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/ionic/components/input/input.ios.scss b/ionic/components/input/input.ios.scss
index 9375848cf1..6f1ebe744f 100644
--- 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
index e33edaa26a..692f6951d0 100644
--- 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
index b40aa16144..71d1cb0879 100644
--- 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
index 94309ec640..d5eb22eada 100644
--- 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
index 3cab44c477..b0cf266afa 100644
--- 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
index a55fd83e9a..98d1dc918d 100644
--- 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);
+}