Set input width to fit text size

Question

I have and input with icon, looking like this: screenshot

<div class="input-with-icon">
  <input type="text" value="abcdefeghijklmnopqrtvuvwxyz" class="form-control">
  <span class="icon icon-calendar"></span>
</div>

live demo

Is it possible to adjust CSS so the input will always fit the text width? e.g. it will stretch as I type.

currently, .input-with-icon has fixed width, but if I set it to auto, input won't stretch.

Possible duplicate of [make html text input field grow as I type?](http://stackoverflow.com/questions/7168727/make-html-text-input-field-grow-as-i-type) — ca8msm, Nov 10 '16 at 10:06
I don't think this is possible without using JavaScript. The reason is that when you are entering text into `` or `` elements, you simply change their `value`. You make no DOM manipulations to the elements which will affect their widths. — Narxx, Nov 10 '16 at 13:32

score 1 · Answer 1 · answered Jan 02 '18 at 07:07

<input id="txt" type="text" value="Hello World!" />
input {
min-width:50px!important;
max-width:99.99%!important;
transition: width 0.25s;
text-align:center;
}
function resizable (el, factor) {
var int = Number(factor) || 7.7;
function resize() {el.style.width = ((el.value.length+1) * int) + 'px'}
var e = 'keyup,keypress,focus,blur,change'.split(',');
for (var i in e) el.addEventListener(e[i],resize,false);
resize();
}
resizable(document.getElementById('txt'),7);

score -2 · Answer 2 · edited May 23 '17 at 11:53

-2

You have many option for that. The First option is to change your <input type="text"> into <textarea class="form-control"></textarea>. <textarea> can handle much better characters than <input type="text">.
The Second option is use this example. This example is from @megakorre in this link. Dont forget to Vote up or put a check if you got the answer. That's all dude! Happy Coding! :)

edited May 23 '17 at 11:53

Community

1
1

answered Nov 10 '16 at 10:34

I changed input to textarea, set rows to 1, set white-space to nowrap and still not working. I got scrollbars. Javascript solution is not acceptable – Liero Nov 10 '16 at 10:43

score -3 · Answer 3 · answered Nov 10 '16 at 10:06

-3

<div class="input-with-icon">
<input type="text" value="tes" class="form-control">
</div>
input[type="data-autosize-input"] {
 width: 90px;
min-width: 90px;
 max-width: 300px;
 transition: width 0.25s;    
 }

answered Nov 10 '16 at 10:06

Ankit Tajpara

76
7

This requires a jQuery plugin. Not sure this applies to this question (as he asked for CSS solution). – Narxx Nov 10 '16 at 10:08
i have already gave you css code so you can apply given code in any of them. – Ankit Tajpara Nov 10 '16 at 10:16
Code does not require JQuery plugin , So you can directly use the above code . – Ankit Tajpara Nov 10 '16 at 10:18
How does it work exactly? Here's a copy-paste of the above code into jsFiddle: https://jsfiddle.net/ynrfn9wr/ – Narxx Nov 10 '16 at 10:20
First of all create an HTML page and include your HTML code . – Ankit Tajpara Nov 10 '16 at 10:26
First of all create an HTML page and include your HTML code – Ankit Tajpara Nov 10 '16 at 10:27
Show me on the fiddle above, how you make your code work. I have copied your code completely. Edit the fiddle as needed and share the edits here (preferably in your answer itself). – Narxx Nov 10 '16 at 13:26
can you share me code have you create .so i can give you exactly answer. – Ankit Tajpara Nov 11 '16 at 04:08
If you have working solution, just share it. but the easiest and most convenient way would be modify and share this: https://jsfiddle.net/ynrfn9wr/ – Liero Nov 11 '16 at 08:15

Set input width to fit text size

3 Answers3