javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): emit proper styles for floating & stacked labels

Browse Source
This commit is contained in:
Brandy Carney
2018-02-08 14:51:41 -05:00
parent a337bd019c
commit 3716300df5
3 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/src/components/select/select.scss
View File

@ -69,3 +69,12 @@ ion-select {
.select-key button { .select-key button {
border: 2px solid #5e9ed6; border: 2px solid #5e9ed6;
} }
// Stacked & Floating Select
// --------------------------------------------------
.item-label-stacked .select,
.item-label-floating .select {
max-width: 100%;
}

3
packages/core/src/components/select/select.tsx
View File

@ -181,6 +181,7 @@ export class Select {
value: this.value, value: this.value,
text: this.text text: this.text
}); });
this.emitStyle();
} }
@Listen('ionSelectOptionDidLoad') @Listen('ionSelectOptionDidLoad')
@ -240,7 +241,6 @@ export class Select {
this.value = this.multiple ? [] : undefined; this.value = this.multiple ? [] : undefined;
} }
this.name = this.name || this.selectId; this.name = this.name || this.selectId;
this.emitStyle();
} }
componentDidLoad() { componentDidLoad() {
@ -269,6 +269,7 @@ export class Select {
this.text = checked.textContent; this.text = checked.textContent;
} }
} }
this.emitStyle();
} }
getLabel() { getLabel() {

28
packages/core/src/components/select/test/basic/index.html
View File

@ -207,10 +207,36 @@
<ion-item> <ion-item>
<ion-label>Disabled</ion-label> <ion-label>Disabled</ion-label>
<ion-select multiple disabled="true"> <ion-select multiple disabled="true">
<ion-select-option checked="true">Selected Text</ion-select-option> <ion-select-option selected="true">Selected Text</ion-select-option>
</ion-select> </ion-select>
</ion-item> </ion-item>
<ion-item>
<ion-label stacked>Stacked</ion-label>
<ion-select>
<ion-select-option>Default</ion-select-option>
<ion-select-option>Other</ion-select-option>
<ion-select-option>N/A</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-select>
<ion-select-option>Default</ion-select-option>
<ion-select-option>Other</ion-select-option>
<ion-select-option>N/A</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-select>
<ion-select-option selected="true">Default</ion-select-option>
<ion-select-option>Other</ion-select-option>
<ion-select-option>N/A</ion-select-option>
</ion-select>
</ion-item>
</ion-list> </ion-list>
<div text-center> <div text-center>