Closed Nadya678 closed 6 years ago
See #1771. I don't think this functionality is related to resize
.
@Nadya678 I've got a simple ES6 definition of this behaviour here:
// Auto Expand
let autoExpand = (selector, option) => {
let styles = ''
let count = 0
let features = {
width: tag => {
let computed = getComputedStyle(tag)
tag.style.width = 'inherit'
let width = parseInt(computed.getPropertyValue('border-left-width'), 10)
+ parseInt(computed.getPropertyValue('padding-left'), 10)
+ tag.scrollWidth
+ parseInt(computed.getPropertyValue('padding-right'), 10)
+ parseInt(computed.getPropertyValue('border-right-width'), 10)
tag.style.width = ''
return `width: ${width}px;`
},
height: tag => {
let computed = getComputedStyle(tag)
tag.style.height = 'inherit'
let height = parseInt(computed.getPropertyValue('border-top-width'), 10)
+ parseInt(computed.getPropertyValue('padding-top'), 10)
+ tag.scrollHeight
+ parseInt(computed.getPropertyValue('padding-bottom'), 10)
+ parseInt(computed.getPropertyValue('border-bottom-width'), 10)
tag.style.height = ''
return `height: ${height}px;`
},
both: tag => {
return features.width(tag) + features.height(tag)
}
}
document.querySelectorAll(selector).forEach(tag => {
let attr = selector.replace(/\W/g, '')
let evaluated = features[option](tag)
tag.setAttribute(`data-${attr}`, count)
styles += `${selector}[data-${attr}="${count}"] { ${evaluated} }\n`
count++
})
return styles
}
Here's a live demo: https://codepen.io/tomhodgins/pen/baqMWL
And I also just updated a similar ES5 function for doing the same thing here today :D
Is there possibility to add to the draft resize:vertical-auto or height:max-content? Or as other property? This simple effect should be possible without JS.
I agree that for iframes this shall be forbidden but why the height:max-content doesn't work for textarea?
@Nadya678 : as @Loirooriol said, this is under discussion in #1771, and seems a better fit for the height
property than for the resize
property.
Agenda+ to ask if WG is OK with having min-content
and max-content
resize form controls (input
and textarea
) based on their content.
Thinking about the horrible javascript I have already seen to achieve this effect, I'm actually in favor of the idea of having this built-in. This is a useful effect, after all.
weak opinion: min-content
should resize the input more to exactly one line, only max-content
should try to fit all lines
@FremyCompany Wrt min-content
, given regular blocks don't currently behave that way, I'd rather not.
The Working Group just discussed [css-sizing] Please add vertical auto-resize textarea field
, and agreed to the following resolutions:
RESOLVED: Have min and max content keywords behave for text area's height the same as for blocks in the height property
RESOLVED: have min and max content keywords for width property of inputs and text area to size based on contained content
We should probably mention a few other things in the spec:
min-block-size: 1lh
in the UA style sheet should do the trick. Then the author can set other values if they prefer. I'm not 100% sure if that's Web-compatible, though: do authors size textareas smaller than 1lh typically?What happens with placeholders? If they wrap, does the textarea shorten when you start typing?
I think preserve the space even when they are not visible. It would seem odd behaviour as a user to focus the element and it suddenly shrink.
What happens when the textarea is empty? You should always assume at least one line, right?
I agree, I can't think of any use case where you would want it to go to 0 even if min-content was actually 0, and handling that with min-height and the UA stylesheet sounds sensible as per @fantasai 's comment.
What happens with placeholders? If they wrap, does the textarea shorten when you start typing?
I think preserve the space even when they are not visible. It would seem odd behaviour as a user to focus the element and it suddenly shrink.
I think so as well. I'm just somewhat cursing in my head because I know that it would be difficult to implement in Edge :)
The min-height solution is risky, because authors could be animating the height for their textbox from 0 to some value, and now their animation would clamp at some non-zero size. I don't see much of a problem to say that min-content/max-content on a form element has an implicit min(1lh, min-content) behavior, it was mostly a remark not something I consider blocking.
In fact, in Edge, this is literally what happens anyway, because we have some "automatic inflation placeholder" when the textbox is empty to ensure it contains at least one line.
@tabatkins that commit doesn't mention placeholder content or the input element. Were those intentionally omitted for now?
Tab forgot to review the issue before committing. :) We've drafted up some better text now. Re-opening to track review.
@FremyCompany OK, folded in your suggestion for a UA-imposed minimum on the intrinsic size.
Remaining question is, what does min-content
mean on an input control? For max-content
it's easy: the size required to show all the content. Should min-content
mean the same thing, or should it look for breakpoints (which cannot ever be taken)?
Agenda+ to verify some details:
If the input control has designated placeholder text to be overlaid in its value display area, then that text is also measured for the purpose of calculating the content-based size—whether or not the placeholder text is visible at the moment. (Thus the content-based intrinsic size of the input control is the larger of the size to fit the placeholder text and the size to fit the value.)
The UA may enforce a minimum (such as the size required to contain a single zero-width character) on the form control’s min-content and max-content sizes to ensure sufficient space for the caret and otherwise maintain usability of the form control.
min-content
on <input type=text>
, which has no breakpoints.Definition of min-content on
<input type=text>
, which has no breakpoints.
Just spitballing here, but is “which has no breakpoints“ similar enough to a span with white-space: nowrap
to just treat it the same way in this regard? Or am I missing something obvious?
@bradkemper Yeah, that's basically it.
The Working Group just discussed Please add vertical auto-resize textarea field
, and agreed to the following resolutions:
RESOLVED: Have a UA defined minimum on content based sizes for these new keywords with suggestions of possible minimums
RESOLVED: Single line inputs have no breakpoints for purpose of calculating min and max.
@tabatkins @fantasai I do have an editorial comment on the test.
The following sentence looks grammatically weird to me ("it"?):
Thus, the min-content size should probably automatically treat it as if it had white-space: pre.
@FremyCompany Mind reviewing?
Looks fine
Any browser implemented max/min-content for textarea?
Am also wondering if there's browser support yet. Over a year later it doesn't seem like it from my tests.
https://www.w3.org/TR/css-ui-4/
Equivalent of the code like the textarea will be non-replaced element:
or precisely the javascript (the div.textarea is styled the same manner like textarea): https://jsfiddle.net/ue2o0uyu/
(not working correctly in non-fixed layout tables with long words and small table)
This effect should be possible without CSS+JS horrible hacks... and with better performance.
BTW. contenteditable doesn't resolve this problem, because the contenteditable elements are not send with form and there is possible to add images...