diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 43ddc68dbb..5e707931a3 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -157,29 +157,15 @@ button, a {
}
-// FROM LABEL
+// Item Input
+// -----------------------------------------
+
:host(.item-label-stacked) .input-wrapper,
:host(.item-label-floating) .input-wrapper {
flex: 1;
flex-direction: column;
}
-:host(.item-label-stacked)::slotted(ion-select),
-:host(.item-label-floating)::slotted(ion-select) {
- align-self: stretch;
-
- max-width: 100%;
-}
-
-
-
-
-// TODO: FROM textarea
-
-:host(.item-textarea) {
- align-items: stretch;
-}
-
// :host(.item-input-has-focus) a,
// :host(.item-input-has-focus) button,
// :host(.item-input-has-focus) textarea {
@@ -187,16 +173,32 @@ button, a {
// }
-// FROM SELECT
+// Item Select
+// -----------------------------------------
+
+:host(.item-label-stacked) ::slotted(ion-select),
+:host(.item-label-floating) ::slotted(ion-select) {
+ align-self: stretch;
+
+ max-width: 100%;
+ width: 100%;
+
+ --padding-start: 0;
+}
+
:host(.item-multiple-inputs) ::slotted(ion-select) {
position: relative;
}
-:host(.item-label-stacked) ::slotted(ion-select),
-:host(.item-label-floating) ::slotted(ion-select) {
- max-width: 100%;
+
+// Item Textarea
+// -----------------------------------------
+
+:host(.item-textarea) {
+ align-items: stretch;
}
+
// Item Reorder
// --------------------------------------------------
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index 3065de705f..17a6180eac 100644
--- a/core/src/components/select/select.ios.scss
+++ b/core/src/components/select/select.ios.scss
@@ -5,7 +5,10 @@
// --------------------------------------------------
:host {
- @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
+ --padding-top: #{$select-ios-padding-top};
+ --padding-end: #{$select-ios-padding-end};
+ --padding-bottom: #{$select-ios-padding-bottom};
+ --padding-start: #{$select-ios-padding-start};
color: $select-ios-text-color;
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index ef876672e9..19a0b5dd2e 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -5,7 +5,10 @@
// --------------------------------------------------
:host {
- @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
+ --padding-top: #{$select-md-padding-top};
+ --padding-end: #{$select-md-padding-end};
+ --padding-bottom: #{$select-md-padding-bottom};
+ --padding-start: #{$select-md-padding-start};
color: $select-md-text-color;
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index c29108a4c6..031975deeb 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -4,6 +4,8 @@
// --------------------------------------------------
:host {
+ @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
display: flex;
overflow: hidden;
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 84ba09e264..9298882962 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -443,7 +443,7 @@ export class Select {
this.ionStyle.emit({
'interactive': true,
'select': true,
- 'input-has-value': this.hasValue(),
+ 'has-value': this.hasValue(),
'interactive-disabled': this.disabled,
'select-disabled': this.disabled
});
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
index 9bc7763f94..cfdb1e40fe 100644
--- a/core/src/components/select/test/basic/index.html
+++ b/core/src/components/select/test/basic/index.html
@@ -223,6 +223,15 @@
+
+ Stacked: selected
+
+ Default
+ Other
+ N/A
+
+
+
Floating
@@ -233,7 +242,7 @@
- Floating
+ Floating: selected
Default
Other