18

I would like to have (preferrably in jQuery) regular text input box which can be clicked and dragged by its right-bottom corner (e.g. like textareas have in Chrome) and resized by user ?

Can't find any jQuery plugin already implementing this. Can anybody give me hint if something like this exists or how could it be easily implemented ?

Thank you in advance.

EDIT: I want to be resizable similarly like textarea is in Chrome...

Frodik
  • 14,986
  • 23
  • 90
  • 141
  • 2
    Do you wish for `` to be resizable? Or would you like the ` – Interrobang Dec 20 '11 at 07:45
  • 1
    Sorry for my bad explanation. I want to be resizable. Example of this behaviour was textarea in Chrome.... – Frodik Dec 20 '11 at 07:49
  • 1
    Resizing an `` element is pointless, you won't magically convert it to a textarea, it'll remain a single line element. Unless you are looking for horizontal extension which might be usefull in some cases. – ChrisR Dec 20 '11 at 07:49
  • 1
    @ChrisR Yes, I'm looking for horizontal extension.... – Frodik Dec 20 '11 at 07:51

4 Answers4

21

You don't need jQuery to handle this. What you need is css.

#yourTextInput{
resize:both;
}

This will allow your text input to have the resize option on the right

XepterX
  • 1,017
  • 6
  • 16
  • Wow, thank you, such an easy and elegant solution. I didn't know about this CSS feature. Thanks. – Frodik Dec 20 '11 at 08:03
  • 43
    Has something changed in the specifications of resize CSS feature ? It doesn't work anymore on input elements, example: http://jsfiddle.net/cbw7q/1/ Anybody has any information about that ? – Frodik Oct 16 '12 at 07:42
  • [resize](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) does NOT apply to "**Inline elements or Block elements for which the overflow property is set to visible**". Input is an `inline-block`-element. – Simon Weber Aug 07 '23 at 12:01
3

Anno 2016 it is a bit more complicated. You need to wrap the <input> in an "inline-block" that you made resizable:

.resizable-input {
    /* make resizable */
    overflow-x: hidden;
    resize: horizontal;
    display: inline-block;

    /* no extra spaces */
    padding: 0;
    margin: 0;
    white-space: nowrap;
  
    /* default widths */
    width: 10em;
    min-width: 2em;
    max-width: 30em;
}

/* let <input> assume the size of the wrapper */
.resizable-input > input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* add a visible handle */
.resizable-input > span {
    display: inline-block;
    vertical-align: bottom;
    margin-left: -16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
    cursor: ew-resize;
}
<span class="resizable-input"><input type="text" /><span></span></span>
MoonLite
  • 4,981
  • 2
  • 21
  • 13
Kijewski
  • 25,517
  • 12
  • 101
  • 143
  • If I change the span line to `Hello World`, it does not behave as I would like it to (at least not with Firefox). Specifically, I only see he "W" from World, appearing with the drag image. Is it possible for the resizing to "push" and "pull" the inline elements that follow? – alex.jordan Feb 21 '19 at 06:56
  • @alex.jordan: thank your for notifying me! There was a typo: the latter `` should be ``. – Kijewski Mar 06 '19 at 14:02
  • Thanks! I should have caught that myself. Blurry eyes :) And thanks for the answer itself. I have an application that I will now look into using this. – alex.jordan Mar 06 '19 at 21:13
  • 1
    The first post was actually correct, and then several "typo" fixes lost the 2nd span element. fixed now. – MoonLite Apr 03 '19 at 20:54
  • @MoonLite: Thank you very much! – Kijewski Apr 04 '19 at 12:30
1

Have you looked at the jQuery UI resizable widget?

Here is the source code for just the resizable example.

Hanna
  • 10,315
  • 11
  • 56
  • 89
PatrikAkerstrand
  • 45,315
  • 11
  • 79
  • 94
0

I made a variation on kay's answer, using the pseudo element ::after instead of a second span. in short:

.resizable-input { ... }
.resizable-input > input { ... }
.resizable-input::after { ... }
/* the last one used to be .resizable-input > span { ... } */

with html just:

<span class="resizeable-input"><input type="text"/></span>

See full code and see it in action here: https://jsfiddle.net/ElMoonLite/qh703tbe/

Also added input { padding-right: 0.5em; } so you can still resize it if it's value is full of text.

Still seems to work in 2019 in Chrome.
In Edge resize does not seem to work (but otherwise looks ok (graceful degradation)). Haven't tested other browsers yet.

MoonLite
  • 4,981
  • 2
  • 21
  • 13