octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity

fix(textarea): textarea with autogrow will size to its contents (#24205)

Browse Source 
Resolves #24793, #21242
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
Sean Perkins
2022-07-27 11:36:48 -04:00
committed by GitHub
gitea-unlock(16/)
parent 0390509919
commit a9cf2ab870
octicon-diff(16/tw-mr-1) 17 changed files with 56 additions and 34 deletions
gitea-whitespace(16/)
gitea-split(16/)
octicon-kebab-horizontal(16/)
Download Patch File Download Diff File Expand all files Collapse all files

40
core/src/components/textarea/textarea.scss
View File

@@ -26,7 +26,7 @@
--placeholder-color: initial;
--placeholder-font-style: initial;
--placeholder-font-weight: initial;
--placeholder-opacity: .5;
--placeholder-opacity: 0.5;
--padding-top: 0;
--padding-end: 0;
--padding-bottom: 0;
@@ -71,22 +71,41 @@
--padding-start: 0;
}
// Native Textarea
// --------------------------------------------------
.textarea-wrapper {
display: grid;
min-width: inherit;
max-width: inherit;
min-height: inherit;
max-height: inherit;
&::after {
// This technique is used for an auto-resizing textarea.
// The text contents are reflected as a pseudo-element that is visually hidden.
// This causes the textarea container to grow as needed to fit the contents.
white-space: pre-wrap;
content: attr(data-replicated-value) " ";
visibility: hidden;
}
}
.native-textarea,
.textarea-wrapper::after {
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include text-inherit();
grid-area: 1 / 1 / 2 / 2;
}
.native-textarea {
@include border-radius(var(--border-radius));
@include margin(0);
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include text-inherit();
display: block;
@@ -103,6 +122,8 @@
resize: none;
appearance: none;
overflow: hidden;
&::placeholder {
@include padding(0);
@@ -117,7 +138,7 @@
}
.native-textarea[disabled] {
opacity: .4;
opacity: 0.4;
}
// Input Cover: Unfocused
@@ -136,6 +157,15 @@
pointer-events: none;
}
:host([auto-grow]) .cloned-input {
// Workaround for webkit rendering issue with scroll assist.
// When cloning the textarea and scrolling into view,
// a white box is rendered from the difference in height
// from the auto grow container.
// This change forces the cloned input to match the true
// height of the textarea container.
height: 100%;
}
// Item Floating: Placeholder
// ----------------------------------------------------------------