fix(ui): properly allows configuring rows for the textarea field (#10031)

### What?

Previously, setting the `admin.rows` property did not change the height
of the `textarea` field input.

### Why?

Although `rows` was being properly set on the textarea element - it's
absolute positioning prevented the height from actually changing.

### How?

Updates the styles of the textarea field component to properly allow the
rows prop to change the height of the field.

Example w/:

```
{
  name: 'someTextArea',
  type: 'textarea',
  admin: {
    rows: 5,
  }
}
```
Before:
![Screenshot 2024-12-17 at 2 50
19 PM](https://github.com/user-attachments/assets/35d433c3-2fad-4930-9da6-b47b5e180af8)

After:
![Screenshot 2024-12-17 at 2 50
00 PM](https://github.com/user-attachments/assets/1a413639-ac29-46ce-b774-e1a30c5a21f0)

Fixes #10017
This commit is contained in:
Patrik
2024-12-17 15:46:11 -05:00
committed by GitHub
parent 4bfa329fa4
commit 61c5e0d3e0
2 changed files with 18 additions and 14 deletions

View File

@@ -68,11 +68,12 @@ export const MyTextareaField: Field = {
The Textarea Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options:
| Option | Description |
| -------------- | ---------------------------------------------------------------------------------------------------------------- |
| **`placeholder`** | Set this property to define a placeholder string in the textarea. |
| **`autoComplete`** | Set this property to a string that will be used for browser autocomplete. |
| **`rtl`** | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. |
| Option | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| **`placeholder`** | Set this property to define a placeholder string in the textarea. |
| **`autoComplete`** | Set this property to a string that will be used for browser autocomplete. |
| **`rows`** | Set the number of visible text rows in the textarea. Defaults to `2` if not specified. |
| **`rtl`** | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. |
## Example

View File

@@ -40,9 +40,8 @@
// Unstyle the textarea, the border is rendered on .textarea-outer
.textarea-element {
position: absolute;
top: 0;
left: 0;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border: inherit;
@@ -66,13 +65,17 @@
// Clone of textarea with same height
.textarea-clone {
vertical-align: top;
display: inline-block;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
white-space: pre-wrap;
overflow-wrap: break-word;
visibility: hidden;
z-index: 0;
line-height: inherit;
}
.textarea-clone::before {