Re: [csswg-drafts] [css-ui] ? Allow <textarea> to be sized by contents. (#7542)

My concerns are with textarea that add extra padding/margins/borders to it. Using `max-content` doesn't help if I use padding around it. My (newer) textareas look like this (apologies for the low contrast):

![image](https://user-images.githubusercontent.com/9271155/236428768-c1890ff0-292f-4f74-9029-70941349429f.png)

![image](https://user-images.githubusercontent.com/9271155/236429166-c7b2a7fa-db21-4557-80a9-bedc0ffce46f.png)

That's so I can shift the resizable part to the corner on both sample. Outlined sample (bottom) uses an upper padding to not bleed into the label when scrolling.

I can enforce a minrow and maxrow, keep padding, while letting users manually resize anywhere between those two values. The CSS looks like:

````css
#control[minrows] {
  min-block-size: calc((var(--min-rows) * var(--line-height))
    + var(--control__margin-top)
    + var(--control__padding-top)
    + var(--control__padding-bottom)
    + var(--control__margin-bottom)
  );
}

#control[maxrows] {
  max-block-size: calc((var(--max-rows) * var(--line-height))
    + var(--control__margin-top)
    + var(--control__padding-top)
    + var(--control__padding-bottom)
    + var(--control__margin-bottom)
  );
}

(`--line-height` = `1lh`)
````

But that doesn't handle automatic sizing, just bounds. That's kinda where I'm worried. Right now, I'm not happy with the maintainability of the JS code. It's basically, add a a number to `[rows]` until it stops layout shifting. I suppose a CSS only solution would be:

````css
block-size:  calc(??? * var(--line-height))
    + var(--control__margin-top)
    + var(--control__padding-top)
    + var(--control__padding-bottom)
    + var(--control__margin-bottom)
````

Unless, I'm missing something in the discussion here. I would need something injectable:


-- 
GitHub Notification of comment by clshortfuse
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7542#issuecomment-1536049952 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 5 May 2023 10:26:05 UTC