Make (and enclosing
) automatically as wide as content

Question

If I have

<div><input></input></div>

how can I make the width of both the input and the containing div automatically as wide as the text value currently presented. In particular, I want the box to grow and shrink when the user edits the input.

Can I do is in pure CSS? Do I have to listen for events and update the style? How? (Note: the font in this case is mono-spaced, so probably that makes it easier, although I'm interested in a general solution).

I believe that it would be impossible for pure CSS, so, I will sit here and wait for superman to come — Sruit A.Suk, Jul 20 '15 at 21:02
If you allowed javascript, this post might be able to solve your problem http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript — Sruit A.Suk, Jul 20 '15 at 21:04
@SruitA.Suk - yes JavaScript (Scala.js) is allowed. I am trying now with `onkeypress`, but it seems that in the event handler `input.value` is still the old one before adding or deleting the most recent character, so this sucks. I'll check out the linked question. — 0__, Jul 20 '15 at 21:06

dippas · Answer 1 · 2018-09-05T09:33:40.983

9

A Pure CSS solution that might help you:

you can fake theinput by using span then make it contenteditable="true" which is widely supported, see here

span {
  border: 1px solid black;
  display: inline-block;
  white-space: nowrap;
  font-family: monospace
}

<span contenteditable="true">&nbsp;</span>

edited Sep 05 '18 at 09:33

answered Jul 20 '15 at 21:51

dippas

58,591
15
114
126

Adding `display: inline-block; white-space: nowrap` may be a good idea to make the `span` behave more like an `input`. – Oriol Jul 20 '15 at 21:57

score 2 · Accepted Answer · answered Jul 20 '15 at 21:45

You can add an input event listener, which will run whenever the value changes.

And in that listener, update input's size attribute.

If the font is monospaced, it should work as desired.

document.querySelector('input').addEventListener('input', function() {
  this.size = this.value.length || 1;
});

input { font-family: monospace; }

<input size="1" />

Make (and enclosing ) automatically as wide as content

2 Answers2

Make (and enclosing
) automatically as wide as content