diff --git a/core/src/components/select/select.common.scss b/core/src/components/select/select.common.scss
index 380f75e1341..ba17af1818b 100644
--- a/core/src/components/select/select.common.scss
+++ b/core/src/components/select/select.common.scss
@@ -57,16 +57,6 @@
cursor: pointer;
}
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
- min-height: 56px;
-}
-
:host(.ion-color) {
--highlight-color-focused: #{current-color(base)};
}
@@ -221,17 +211,6 @@ button {
overflow: hidden;
}
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
- /**
- * When using a stacked/floating label, the inner wrapper is
- * stacked vertically under the label container. This line
- * ensures that the inner wrapper fills all the remaining height
- * of the component.
- */
- flex-grow: 1;
-}
-
// Select Highlight
// ----------------------------------------------------------------
diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss
index 8c60a4f7ccb..64002313ad6 100644
--- a/core/src/components/select/select.native.scss
+++ b/core/src/components/select/select.native.scss
@@ -118,6 +118,27 @@
max-width: calc(100% / #{$form-control-label-stacked-scale});
}
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+ min-height: 56px;
+}
+
+/**
+ * When using a stacked/floating label, the inner wrapper is
+ * stacked vertically under the label container. This line
+ * ensures that the inner wrapper fills all the remaining height
+ * of the component.
+ */
+:host(.select-label-placement-stacked) .select-wrapper-inner,
+:host(.select-label-placement-floating) .select-wrapper-inner {
+ flex-grow: 1;
+}
+
// Start/End Slots
// ----------------------------------------------------------------
diff --git a/core/src/components/select/test/size/index.html b/core/src/components/select/test/size/index.html
index 247509cd025..50441caa5bf 100644
--- a/core/src/components/select/test/size/index.html
+++ b/core/src/components/select/test/size/index.html
@@ -47,6 +47,9 @@
Small
Filled text
+
+ Filled text
+
@@ -54,6 +57,9 @@
Medium
Filled text
+
+ Filled text
+
@@ -61,6 +67,9 @@
Large
Filled text
+
+ Filled text
+
diff --git a/core/src/components/select/test/size/select.e2e.ts b/core/src/components/select/test/size/select.e2e.ts
index 927c2298ec1..de33b71c2c2 100644
--- a/core/src/components/select/test/size/select.e2e.ts
+++ b/core/src/components/select/test/size/select.e2e.ts
@@ -28,6 +28,26 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screens
await expect(select).toHaveScreenshot(screenshot(`select-size-${size}`));
});
+
+ test(`${size} - should not have visual regressions when label is unset`, async ({ page }) => {
+ await page.setContent(
+ `
+
+ Filled text
+
+ `,
+ config
+ );
+
+ const select = page.locator('ion-select');
+
+ await expect(select).toHaveScreenshot(screenshot(`select-size-${size}-unset-label`));
+ });
});
});
});
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e68601a1121
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..80b0c39499a
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..071c90c5b96
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..07791fcc274
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5c5ffaca7c6
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cf6854ab28c
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a9a4e163221
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4cfebbea458
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0a1f6326db5
Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ