Dynamically Increase and Decrease an Input Text Box Size Depending on Another Selector Width

Dynamically increase and decrease an input text box size depending on another selector width

The solution only needed to count the width of the input text box and the wrapper and assign the difference as a padding to the right of the input text box. The following little change was added to an onInput event.

document.getElemendById("inputTextBox").style.paddingRight = document.getElemendById("searchFieldWrapper").clientWidth;

And also needed to use Media Queries for @media (--large-viewport) / @media (--medium-viewport) to assign different padding for the input. as @Scott Marcus mentioned in a comment.

Adjust width of input field to its input

It sounds like your expectation is that the style be applied dynamically to the width of the textbox based on the contents of the textbox. If so you will need some js to run on textbox contents changing, something like this:

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Note: this solution only works when every character is exactly 8px wide. You could use the CSS-Unit "ch" (characters) which represents the width of the character "0" in the chosen font. You can read about it here.

Bootstrap - How can I reduce the width of input text (type=number) control to N number of digit spaces

if you want the width is dynamically changes by length of the content you need javascript, with note this solution works only when every char is 8px wide and the 18 is for button input number, onkeypress is for input by keyboard and onchange is event for change by input button number :

<div class="col-md-1 px-0 py-0 mx-0 my-0">
   <input id="metric_domain__input__lowerbound__1" class="checkbox form-check form-check-inline input-sm" type="number" filter_controls_div_name="filter_controls__results__coverage__div" metric_domain__checkbox__ordinal_number="1" step="any" placeholder="0.010001" style="width: 26px;" onkeypress="this.style.width = (18 + ((this.value.length + 1) * 8)) + 'px';" onchange="this.style.width = (18 + ((this.value.length + 1) * 8)) + 'px';">
</div>

width:auto for <input> fields

An <input>'s width is generated from its size attribute. The default size is what's driving the auto width.

You could try width:100% as illustrated in my example below.

Doesn't fill width:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Fills width:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Smaller size, smaller width:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

UPDATE

Here's the best I could do after a few minutes. It's 1px off in FF, Chrome, and Safari, and perfect in IE. (The problem is #^&* IE applies borders differently than everyone else so it's not consistent.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

jQuery - resizing form input based on value's width?

Here is the jQuery code :

$('input').each(function(){
var value = $(this).val();
var size  = value.length;
// playing with the size attribute
//$(this).attr('size',size);

// playing css width
size = size*2; // average width of a char
$(this).css('width',size*3);

});

http://jsfiddle.net/bzBdX/7/

React: how to make an input only as wide as the amount of text provided?

Here is an approach from plain HTML/CSS and a working snippet , hidding the value typed inside a span behind the input set in an absolute position. CSS can make both span and input matching the same lenght/width. Stretching/collapsing a parent (label) will finish the job.

In the courtesy of @silvenon you may also find a react sample below the snippet

var val = document.querySelector('#test');
let tpl = document.querySelector('#tpl');
let text = val.value;
 tpl.textContent= text;

val.addEventListener("input", function () {// onchange ...
  let text= val.value;
  //console.log(text);
  tpl.textContent= text;
  });

label {
  display: inline-block;
  position: relative;
  min-width: 2em;
  min-height: 1.4em;
}

#tpl {
  white-space: pre;
  /* max-width : could be wised to set a maximum width and overflow:hidden; */
}

#test {
  font-family: inherit;
  font-size: inherit;
  position: absolute;
  vertical-align: top;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
}

<label><span id="tpl"></span><input id='test' value="Some test to try" ></label>

Dynamically Adjust HTML Text Input Width to Content

Use onkeypress even

see this example :http://jsfiddle.net/kevalbhatt18/yug04jau/7/

<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>

And for placeholder on load use jquery and apply placeholder
size in to input

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

Even you can use id instead of input this is just an example so that I
used $(input)

And in css provide min-width

.form {
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:4px;
}

EDIT:

If you remove all text from input box then it will take placeholder value using focusout

Example: http://jsfiddle.net/kevalbhatt18/yug04jau/8/

$("input").focusout(function(){

    if(this.value.length>0){
        this.style.width = ((this.value.length + 1) * 8) + 'px';
    }else{
      this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px';
    }

});

Dynamically Increase and Decrease an Input Text Box Size Depending on Another Selector Width