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
This commit is contained in:
Brandy Carney
2016-03-09 15:53:13 -05:00
parent 13b39b907b
commit 4e375242c6
6 changed files with 44 additions and 3 deletions

View File

@ -40,6 +40,13 @@ $text-input-ios-input-clear-icon-size: 18px !default;
margin-bottom: 8px; 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-floating .text-input.cloned-input,
.item-label-stacked .text-input.cloned-input { .item-label-stacked .text-input.cloned-input {
top: 30px; top: 30px;

View File

@ -71,6 +71,13 @@ ion-input.ng-invalid.ng-touched:after {
margin-bottom: 8px; 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-floating .text-input.cloned-input {
top: 32px; top: 32px;
} }

View File

@ -69,6 +69,13 @@ ion-input.ng-invalid.ng-touched .text-input {
margin-bottom: 8px; 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-floating .text-input.cloned-input {
top: 32px; top: 32px;
} }

View File

@ -1,7 +1,14 @@
import {App} from 'ionic-angular'; import {App, Page} from 'ionic-angular';
@App({ @App({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class E2EApp {
rootPage = PageOne;
}
@Page({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class E2EApp {} class PageOne {}

View File

@ -37,7 +37,10 @@
<ion-item> <ion-item>
<ion-label stacked>Label 6</ion-label> <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>
<ion-item> <ion-item>

View File

@ -48,3 +48,13 @@ ion-label[floating] {
flex: 1; flex: 1;
flex-direction: column; 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);
}