diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index ac1b4a22a3..dbe4dbc544 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -23,7 +23,7 @@ // Native Text Input // -------------------------------------------------- -:host(.input-label-placement-floating:not(.input-fill-outline)) .native-input, +:host(.input-label-placement-floating:not(.input-fill-outline)) .native-input, :host(.input-label-placement-stacked:not(.input-fill-outline)) .native-input { padding-top: 1em; } @@ -76,7 +76,7 @@ // Input Highlight // ---------------------------------------------------------------- -.input-highlight { +.input-highlight { @include position(null, null, -1px, 0); position: absolute; diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index a9e2244f42..6674ad476f 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -678,6 +678,8 @@ export class Input implements ComponentInterface { labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus)); const startSlotEl = el.querySelector('[slot="start"]'); + + // 16px is the margin after the start slot content, which we also need to account for. const startSlotWidth = startSlotEl ? startSlotEl.clientWidth + 16 : 0; return ( diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss index ed2bf04185..69f775bceb 100644 --- a/core/src/components/textarea/textarea.md.scss +++ b/core/src/components/textarea/textarea.md.scss @@ -89,7 +89,7 @@ * so it is not cut off by the * the item's line (if one is present). */ -:host(.in-item) .textarea-highlight { +:host(.in-item) .textarea-highlight { @include position(null, null, 0, 0); } diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index baec60d6bd..fd265ea27d 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -630,6 +630,11 @@ :host(.textarea-label-placement-stacked) ::slotted([slot="end"]), :host(.textarea-label-placement-floating) ::slotted([slot="start"]), :host(.textarea-label-placement-floating) ::slotted([slot="end"]) { + /** + * 1em accounts for the padding applied to the native textarea. + * This value may need adjusting to get everything lined up + * in all conditions. + */ margin-top: calc(1em + 8px); }