The estate resize
has the following specification:
Note: resize
is not applied in the following cases:
- Elements inline
- Elements block on which property
overflow
not with the value visible
You can see a list of elements inline, and the element <input>
is in it. So, it is expected that the resize
does not work on it.
"But what if I change to display: block
and put overflow: visible
?"
It should work, but the <input>
is a replaced element (a replaced element is an element whose representation is outside the scope of the CSS), so it is not possible to use resize
on account of those limitations.
Alternative:
What might suit you (of course it depends on case by case) is to use a <textarea>
, using CSS to allow you to expand horizontally and hide the scrollbar. To prevent the user from creating new lines with Enter, would be via Javascript. So it will behave similar to the desired.
document.querySelector("#txtArea").addEventListener("keydown", e => {
if (e.keyCode === 13) {
e.preventDefault();
}
});
textarea {
resize: horizontal;
white-space: nowrap;
overflow: hidden;
min-width: 120px;
/* Para alinhar com o texto */
margin-bottom: -4px;
}
<p>Declaro para os devidos fins que eu <textarea id="txtArea" placeholder="Insira seu nome" rows="1"></textarea> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus nisi nibh, nec varius tortor blandit nec. Suspendisse scelerisque mauris et imperdiet placerat. Vivamus vel ex lorem. Morbi est orci, suscipit in consectetur in, egestas a risus.</p>
"Why does it work in <textarea>
so if she is also a replaced element?"
Good, the MDN documentation indicates that in most browsers <textarea>
'are scalable, so mine speculation Here’s what’s more for a convention than specification. You can read the specifications of <textarea>
, but there is not even a mention of the resize
.
Although, in the context of that question, it’s not a good idea to use
<div>
within a tag<p>
(List of HTML5 Elements that can be nested Inside P element?), I think it’s a more practical solution for generic cases than using a<textarea>
as I did in my reply :)– Rafael Tavares
@Rafaeltavares I’m kind of on a clock right now, but we can test other containers on this list to see which ones are resizable. However I think that this solution of the other Rafael (author of the question) will have problems with the line size when the input happens to be in the margin. Perhaps it would be better to make the form separate, more traditional, and show the text mounted just below, via JS... But then I’m already throbbing enough kkkk.
– Bacco
@Rafaeltavares edited the answer, I switched to SPAN, which is part of the list of elements considered phrasing-content, grateful for the observation.
– Bacco
I was surprised to run with
<span>
because of what he had found researching and testing on<input>
. I was researching more and just got more confused hahaha, but I took the opportunity to update my answer too. Everything indicates that it is not expected to workresize
in the<input>
, but work in the<textarea>
is because of magic (or even convention)– Rafael Tavares
The container idea worked great too. It depends a little more on tweaking my code since I’m using it in and out of summernote. @Rafaeltavares I think it is valid to think of magic =P
– Rafael