Adjust Width of Input Field to Its Input

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.

How to set html input tag width fit-content in css

You can do like this.
I posted two solution with span and data-*.

html

    <p>solution with span <span class="number-input" role="textbox" contenteditable>200001230001003002</span></p>
    
    <p>Solution with data-*<label class="input-sizer" data-value="200001230001003002">
        <input class="number-input1" type="text" oninput="this.parentNode.dataset.value = this.value" size="1" value="200001230001003002">
    </label></p>
    <button class="save"></button>

-css

.number-input {
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
}

.number-input1{
  font-family: inherit;
  font-size: inherit;
}

.input-sizer {
  display: inline-grid;
  vertical-align: top;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  font-family: inherit;
  font-size: inherit;
}  

.input-sizer::after 
{
    content: attr(data-value) "  ";
    visibility: hidden;
    font-family: inherit;
    font-size: inherit;
    white-space: pre-wrap; 
}

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>

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';
    }

});

How to shorten width of input field - Bootstrap v5 or CSS

Because of using form-control, it is taking the full width allotted. You can use the column property like col-md-4 or other property to make the size you wanted.

How to adjust textbox width based on input that has fixed number of characters but font size may vary?

You can use ch unit. 1ch is approximately equal to the width of 1 character. Since you know the length of the input value is going to be 11 characters, you can set the width of it to be 11ch.

So when you get the response from the server, you can set the width to be 11ch. Although you could make it 12ch and make it look a tad bit better (or you could add padding to the input)

#code {
    width: 11ch;
}

The accepted answer to this question gives a great explanation of the difference between ch and em. Something you may want to consider.

How can I set auto-width/length on text input field?

Based on the links others were suggesting didn't help me figure out the dynamic / fluid width issue with the input field. BUT it did get me motivated to figure out how to get the value into a span element rather than using the input field.

Here was my solution:

HTML:

1. Removed this <input id="p-charge" type="number">
2. Replace with this <span id="p-charge"></span>

JS:

1. Add this var totalFee = $("#p-charge");
2. Add this totalFee.text((charge || 0).toFixed(2));

var Pgoal = document.querySelector(".p-goal");var Ffixed = document.querySelector("#f-fixed");var Fpercent = document.querySelector("#f-percent");var Pcharge = document.querySelector("#p-charge");var checkbox = document.querySelector("#gift-check");var totalBox = document.querySelector(".total-box");var totalFee = $("#p-charge");var totalDonation = $(".total-box > span");
function f(n) {  return Number((+n).toFixed(10));}
function calcPcharge(goal, fixed, percent) {  return (goal + fixed) / (1 - percent) - goal;}
function update() {  console.log("update");  var charge = calcPcharge(    f(Pgoal.value),    f(Ffixed.value),    f(Fpercent.value / 100)  );
  Pcharge.value = (charge || 0).toFixed(2);
  var total = checkbox.checked ? f(Pgoal.value) + f(charge) : f(Pgoal.value);
  totalFee.text((charge || 0).toFixed(2));
  totalDonation.text(total.toFixed(2));
  document.querySelector("input[name='amount']").value = total;}
[].forEach.call(document.querySelectorAll("input"), function() {  this.addEventListener("input", update);  this.addEventListener("change", update);});
update();
checkbox.addEventListener("change", update);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h2>Cost $<span class="total-box"><span></span></span></h2>
<span>$</span><input type="number" min="1.00" max="200000.00" step="0.01" value="60" id="other_amount" name="other_amount" class="p-goal"><span>USD</span>
<input type="hidden" id="f-fixed" type="number" value="0.30"><input type="hidden" id="f-percent" type="number" value="2.9">
<p>Gift transaction fee of $<span id="p-charge"></span> so we can get 100% of your payment?</p><!-- <p>Gift transaction fee of $ <input id="p-charge"  type="number"> so we can git 100% of your payment?</p> -->
<input type="checkbox" value="yes" name="yes" id="gift-check" autocomplete="off">Yeah, Sure!
<p>Total Amount $<span class="total-box"><span></span></span></p>