Is it possible to use the resize function of the textarea in an input?

Asked

Viewed 277 times

4

Good morning, everyone.

I’m making a form, and I wanted to make a <input type='text' /> that the user could set the width, with that drag resize that exists in the textarea.

I want to insert this feature in a simple excerpt like:

<p>Declaro para os devidos fins que eu <input type="text" name="nome" placeholder="Insira seu nome"></p>

Is that possible? I tried adding a resize: both, or even a resize: horizontal no input but did not work.

input {
    resize: horizontal;
    overflow: auto;
}

I tried to use the textarea allowing only horizontal resize, but it does not align to the rest as input

Behavior with the input

Efeito com o input

Behavior with textarea Efeito com textarea

Thank you from now on guys. Happy week to everyone

html css input resize

2 answers

5

Directly into a input no, but you can use a container:

span {display:inline-block;resize:both;overflow:hidden;padding-right:20px;border:1px solid red}
input {margin-right:20px;width:100%;height:100%;border:1px solid blue}
<span><input type="text" value="fake resize"></span>

The edge is just for easy viewing. Note that I inserted a padding to make it easier to pull the corner without affecting the text, but you can remove it if you want.

  • 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 :)

  • 1

    @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.

  • @Rafaeltavares edited the answer, I switched to SPAN, which is part of the list of elements considered phrasing-content, grateful for the observation.

  • 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 work resize in the <input>, but work in the <textarea> is because of magic (or even convention)

  • 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

3


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.

  • Interesting that the textarea is also in the list neh? I’m trying to use the textarea, but unfortunately it does not align to the text equal an input (gets a little up) maybe by the height of the box or the padding. You may need to adjust via css to look like an input I imagine. I completed the question with images to make it clearer

  • Well noted that the <textarea> is also inline. I even looked at the specs, but it doesn’t say anything about her having the resize... As much as found was "In Most browsers, <textarea>s are resizable", indicating that this probably it’s a convention.

  • And about the alignment, I modified the response and needed to use margin-bottom negative to give an aligned , but without the margin-bottom she didn’t look the same in your image, you probably have other styles affecting her or the tag <p>.

  • Interesting this convention. I will give one more study to understand the functioning of resize. In fact, I have a line-height in my code, I hit it to 0.4in below the margin-bottom and it was perfect. Thank you very much.

Browser other questions tagged html css input resize

You are not signed in. Login or sign up in order to post.