style(textarea): adjusting min-height of the element #30950

rugoncalves · 2026-02-09T18:44:56Z

Issue number: resolves internal

What is the current behavior?

The height of the textarea would not correspond to the rows number, when it the row number was set to 1:
Ionic theme specifics:
- Some paddings and margins were inaccurate;
- Some CSS selectors were being more generic than it should:
  - :host([auto-grow]) .textarea-wrapper-inner
    This selector was always being applied independently on the value of the attribute auto-grow;

What is the new behavior?

The min-height is now respecting the rows attribute:
The ionic theme has the following changes:
- .textarea-size-* classes stopped forcing the min-height;
- textarea minimum height, is now equivalent to the number of rows plus half row.
  This will cause the last line to be partially visible;
- Fixed selector :host([auto-grow]) .textarea-wrapper-inner, to be applied only when auto-grow = false;
- Removed margin of the native textarea element, as the ionic theme adds padding, will make the textarea never overlaps the label;
- Added a style inline setting up a CSS variable --host-rows in the host, so that the minimum height can be calculated in the element div[.textarea-wrapper-inner];

Does this introduce a breaking change?

Yes
No

Other information

vercel · 2026-02-09T18:45:02Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Feb 10, 2026 0:34am

Copilot

Pull request overview

Updates ion-textarea styling so the control’s minimum height better matches the configured rows (especially for rows="1"), with additional Ionic-theme-specific selector and spacing fixes.

Changes:

Add a data-attr-rows attribute to the textarea inner wrapper to enable rows-based styling.
Update Ionic theme sizing/min-height behavior, plus tighten auto-grow selectors to exclude auto-grow="false".
Adjust Ionic theme textarea top margin behavior (and remove the old outline-only margin rule).

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 10 comments.

File	Description
core/src/components/textarea/textarea.tsx	Adds `data-attr-rows` on the wrapper for CSS-based rows sizing.
core/src/components/textarea/textarea.ionic.scss	Reworks Ionic theme min-height logic, auto-grow selectors, and label-placement spacing.
core/src/components/textarea/textarea.ionic.outline.scss	Removes outline-only textarea margin-top rule (spacing now handled elsewhere).
core/src/components/textarea/textarea.common.scss	Adds rows-related min-height override for certain host/class combinations.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

core/src/components/textarea/textarea.ionic.scss

core/src/components/textarea/textarea.common.scss

Copilot · 2026-02-09T18:52:13Z

core/src/components/textarea/textarea.ionic.scss

 // Setting height to 0 allows it to collapse in height
 // instead of growing above the min height by default.
 .textarea-wrapper-inner {
  height: 0;
 }

 :host(.textarea-size-small) .textarea-wrapper-inner {
  --padding-top: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-300};
  --padding-bottom: #{globals.$ion-space-200};
  --padding-start: #{globals.$ion-space-300};
-
-  min-height: globals.$ion-scale-2800;
 }

 :host(.textarea-size-medium) .textarea-wrapper-inner {
  --padding-top: #{globals.$ion-space-300};
  --padding-end: #{globals.$ion-space-400};
  --padding-bottom: #{globals.$ion-space-300};
  --padding-start: #{globals.$ion-space-400};
-
-  min-height: globals.$ion-scale-3400;
 }

 :host(.textarea-size-large) .textarea-wrapper-inner {
  --padding-top: #{globals.$ion-space-400};
  --padding-end: #{globals.$ion-space-500};
  --padding-bottom: #{globals.$ion-space-400};
  --padding-start: #{globals.$ion-space-500};
-
-  min-height: globals.$ion-scale-3600;
 }

+// When the rows attribute is set, the container of the textarea should
+// should increase in height to accommodate the number of rows.
+// The min-height should accomodate the number of rows, plus a little extra
+// so that the next line is partially visible. To that we add the amount of
+// the bottom padding and the border width outside the textarea.
+// If --host-rows is set, then it will be used, otherwise the data-attr-rows
+// attribute will be used.
+.textarea-wrapper-inner[data-attr-rows] {
+  --number-rows: var(--host-rows, attr(data-attr-rows number));
+  min-height: calc(var(--number-rows) * 1.2em + 1.5em + var(--padding-bottom, 0px) + var(--border-width, 0px));
+}


textarea-wrapper-inner is forced to height: 0, but after removing the size-specific min-height rules the element only gets a min-height when data-attr-rows is present. If rows is not set (common case), the wrapper can collapse and the textarea may overflow/overlap other content. Provide a non-rows fallback min-height (or ensure the rows-based min-height logic always applies, including default rows).

To be ignored.

Copilot · 2026-02-09T18:52:14Z

core/src/components/textarea/textarea.tsx

        <label class="textarea-wrapper" htmlFor={inputId} onClick={this.onLabelClick} part="wrapper">
          {this.renderLabelContainer()}
-          <div class="textarea-wrapper-inner">
+          <div class="textarea-wrapper-inner" data-attr-rows={this.rows !== undefined ? this.rows.toString() : undefined}>


data-attr-rows is only set when this.rows is defined, but the updated Ionic theme styling relies on that attribute to compute min-height. This can break the default textarea (no rows prop/attr) in the Ionic theme. Consider always providing a rows value for styling purposes (e.g., defaulting to the native textarea default) or using a CSS custom property instead of a conditional attribute.

Suggested change

<div class="textarea-wrapper-inner" data-attr-rows={this.rows !== undefined ? this.rows.toString() : undefined}>

<div class="textarea-wrapper-inner" data-attr-rows={(this.rows ?? 2).toString()}>

To be ignored.

Copilot · 2026-02-09T18:52:14Z

core/src/components/textarea/textarea.ionic.scss

+// If --host-rows is set, then it will be used, otherwise the data-attr-rows
+// attribute will be used.
+.textarea-wrapper-inner[data-attr-rows] {
+  --number-rows: var(--host-rows, attr(data-attr-rows number));
+  min-height: calc(var(--number-rows) * 1.2em + 1.5em + var(--padding-bottom, 0px) + var(--border-width, 0px));


attr(data-attr-rows number) in a calc() for layout is not reliably supported across browsers. If unsupported, the computed min-height becomes invalid and the textarea can collapse (especially with height: 0 on the wrapper). Prefer setting a numeric CSS custom property from TS/JS (or another supported mechanism) instead of relying on attr() for numeric values in properties.

Suggested change

// If --host-rows is set, then it will be used, otherwise the data-attr-rows

// attribute will be used.

.textarea-wrapper-inner[data-attr-rows] {

--number-rows: var(--host-rows, attr(data-attr-rows number));

min-height: calc(var(--number-rows) * 1.2em + 1.5em + var(--padding-bottom, 0px) + var(--border-width, 0px));

// The --host-rows custom property should be set (for example from JS/TS)

// to reflect the number of rows; we fall back to 1 row if it is not set.

.textarea-wrapper-inner[data-attr-rows] {

min-height: calc(var(--host-rows, 1) * 1.2em + 1.5em + var(--padding-bottom, 0px) + var(--border-width, 0px));

To be ignored. Has this suggestion of implementation was intended. In the future we can remove the usage of the variable --host-rows.

Copilot · 2026-02-09T18:52:14Z

core/src/components/textarea/textarea.ionic.scss

+ * there is no need to add margin-top to the textarea.
+ */
+:host(.textarea-label-placement-stacked) textarea,
+:host(.textarea-label-placement-floating) textarea {
+  margin-top: 0;


In Ionic theme you reset margin-top on the textarea for stacked/floating labels, but the auto-grow sizing uses .native-wrapper::after (in textarea.common.scss) to mirror textarea spacing. If the pseudo-element keeps the old top margin while the textarea margin is zero, auto-grow height calculations can become inconsistent. Consider overriding the corresponding .native-wrapper::after margin for these label placements in the Ionic theme too (or otherwise keeping textarea and pseudo-element spacing in sync).

Suggested change

* there is no need to add margin-top to the textarea.

*/

:host(.textarea-label-placement-stacked) textarea,

:host(.textarea-label-placement-floating) textarea {

margin-top: 0;

* there is no need to add margin-top to the textarea.

* We also need to keep the auto-grow pseudo-element spacing

* in sync with the textarea spacing.

*/

:host(.textarea-label-placement-stacked) textarea,

:host(.textarea-label-placement-floating) textarea {

margin-top: 0;

}

:host(.textarea-label-placement-stacked) .native-wrapper::after,

:host(.textarea-label-placement-floating) .native-wrapper::after {

margin-top: 0;

core/src/components/textarea/textarea.ionic.scss

Copilot · 2026-02-09T18:52:15Z

core/src/components/textarea/textarea.common.scss

+ * but rather respect the natural height of the textarea. Specially when
+ * rows is set to 1.
+ */
+:host(.textarea-fill-outline.sc-ion-textarea-md-h[rows]),


Selector uses generated scope class .sc-ion-textarea-md-h, which is brittle and atypical compared to other styles that key off the stable .md / .ios host classes. Prefer targeting the mode via .md (or another stable mode indicator) instead of the generated scope class so the rule does not depend on Stencil scoping internals.

Suggested change

:host(.textarea-fill-outline.sc-ion-textarea-md-h[rows]),

:host(.textarea-fill-outline.md[rows]),

Copilot · 2026-02-09T18:52:15Z

core/src/components/textarea/textarea.ionic.scss

 // The height should be auto only when auto-grow is enabled.
-:host([auto-grow]) .textarea-wrapper-inner {
+:host([auto-grow]:not([auto-grow="false"])) .textarea-wrapper-inner {
  height: auto;


PR description says the :host([auto-grow]) .textarea-wrapper-inner selector should apply only when auto-grow = false, but the updated selector applies when auto-grow is enabled ([auto-grow] and not [auto-grow="false"]). If the description is meant to say “only when auto-grow is enabled”, consider correcting the PR description to avoid confusion.

Copilot · 2026-02-09T18:52:15Z

core/src/components/textarea/textarea.ionic.scss

 // The height should be auto only when auto-grow is enabled.
-:host([auto-grow]) .textarea-wrapper-inner {
+:host([auto-grow]:not([auto-grow="false"])) .textarea-wrapper-inner {
  height: auto;
 }

 // The min and max height should be inherited if auto-grow is enabled.
 // This allows the textarea to grow and shrink as needed.
-:host([auto-grow]) .native-wrapper {
+:host([auto-grow]:not([auto-grow="false"])) .native-wrapper {
  min-height: inherit;


The Ionic theme selectors were updated to exclude auto-grow="false", but textarea.common.scss still has multiple :host([auto-grow]) ... rules. If the Stencil boolean prop parses auto-grow="false" as false, those common styles will still apply because the attribute is present, causing inconsistencies across themes. Consider updating the common auto-grow selectors to also exclude [auto-grow="false"] for consistent behavior.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…amework into ROU-12443-v2

thetaPC · 2026-02-10T16:04:38Z

core/src/components/textarea/textarea.common.scss

+ * but rather respect the natural height of the textarea, especially when
+ * rows is set to 1.
+ */
+:host(.textarea-fill-outline.sc-ion-textarea-md-h[rows]),


As Copolit mentioned, we shouldn't be targeting generated classes. This should be moved into the textarea.md.outline.scss file since it's for the md styles.

thetaPC · 2026-02-10T16:06:05Z

core/src/components/textarea/textarea.ionic.scss

+   * Clamp the minimum value to 1 to prevent 0 or negative heights.
+   * Add 0.5 to show a half-line peek at the next row.
+   */
+  --number-rows: calc(max(var(--host-rows, 1), 1) + 0.5);


Is it possible to accomplish the styling without creating new CSS variables?

thetaPC · 2026-02-10T16:08:08Z

core/src/components/textarea/textarea.tsx

        })}
+        // For ionic theme, we need to define this css variable
+        style={
+          theme === 'ionic' ? { '--host-rows': this.rows !== undefined ? this.rows.toString() : undefined } : undefined


Is it possible to accomplish the styling without creating new CSS variables?

rugoncalves added 9 commits February 6, 2026 14:20

Removing min-height from textarea-sizes classes

4620d25

Enforcing respect over row parameter

2ef9d30

Adding row attribute to container

fcc4bf4

Calculate appropriate min-height for textarea

4062300

Removing margin from textarea element

228df5f

Respecting correct value of attribute

df337e8

Recalculating size

0d7441e

Adding a fix for ODC Studio nuance

f205099

Adding variable for padding and border

631cea2

rugoncalves requested a review from a team as a code owner February 9, 2026 18:44

rugoncalves requested review from Copilot and thetaPC February 9, 2026 18:44

github-actions bot added the package: core @ionic/core package label Feb 9, 2026

Copilot started reviewing on behalf of rugoncalves February 9, 2026 18:45 View session

Copilot AI reviewed Feb 9, 2026

View reviewed changes

Ensuring attribute is only added for ionic theme

13f92b3

vercel bot deployed to Preview February 9, 2026 19:08 View deployment

rugoncalves and others added 2 commits February 9, 2026 21:14

Fix typo

6398b20

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Fix typo

44984f9

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel bot deployed to Preview February 9, 2026 20:16 View deployment

Fix typo

9ad8705

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel bot deployed to Preview February 9, 2026 20:25 View deployment

rugoncalves added 2 commits February 10, 2026 10:38

Fixing lint errors

223ce69

Merge branch 'ROU-12443-v2' of https://github.com/ionic-team/ionic-fr…

d65d117

…amework into ROU-12443-v2

vercel bot deployed to Preview February 10, 2026 09:41 View deployment

rugoncalves added 3 commits February 10, 2026 11:53

Remove attribute data-attr-rows

0be00d5

Adding inline css variable for ionic theme

dd58785

Simplifying formula

791a201

vercel bot deployed to Preview February 10, 2026 10:58 View deployment

chore(): add updated snapshots

bf9c315

vercel bot deployed to Preview February 10, 2026 12:27 View deployment

rugoncalves added 2 commits February 10, 2026 13:31

Fix for when the rows are not set

239488f

Merge branch 'ROU-12443-v2' of https://github.com/ionic-team/ionic-fr…

10b94bc

…amework into ROU-12443-v2

vercel bot deployed to Preview February 10, 2026 12:34 View deployment

BenOsodrac approved these changes Feb 10, 2026

View reviewed changes

thetaPC requested changes Feb 10, 2026

View reviewed changes

	<div class="textarea-wrapper-inner" data-attr-rows={this.rows !== undefined ? this.rows.toString() : undefined}>
	<div class="textarea-wrapper-inner" data-attr-rows={(this.rows ?? 2).toString()}>

	:host(.textarea-fill-outline.sc-ion-textarea-md-h[rows]),
	:host(.textarea-fill-outline.md[rows]),

style(textarea): adjusting min-height of the element #30950

Are you sure you want to change the base?

style(textarea): adjusting min-height of the element #30950

Uh oh!

Conversation

rugoncalves commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

rugoncalves Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

rugoncalves Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

rugoncalves Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

thetaPC Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

thetaPC Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rugoncalves commented Feb 9, 2026 •

edited

Loading

vercel bot commented Feb 9, 2026 •

edited

Loading

thetaPC Feb 10, 2026 •

edited

Loading