Dynamic width for a disabled input data

Question

First of all I already did try researching how to make my input to be dynamic based from the from the width of its data but all answers that I could see is from the input which is not disabled. Its trigger is from key up or onclick which is not applicable to mine since my input is disabled.

This is the screenshot of my problem. As you can see my amount in words in Pesos is cut and is not dynamically expanding.

This is my html:

<table width="100%">
    <tr>
         <td> 
           <div style="height:35px">
                   <div style="float:left" class="controlLabelBold">Check Number:</div>
                   <div style="float:left">
                     <input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
                   </div>
           </div>  
        </td>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Check Date:</div>
                   <div style="float:left">
                   <input name="checkDate" class="checkDate text ui-widget-content ui-corner-all"  style="width:250px;" readonly /></div>
           </div> 
        </td>
    </tr>
    <tr>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Client Name:</div>
                   <div style="float:left"><input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly /> </div>
           </div> 
        </td>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Amount:</div>
                   <div style="float:left"><input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/></div>
           </div> 
        </td>
    </tr>
    <tr>
        <td>
             <div style="height:35px">
                   <div style="float:left" class="controlLabel">Pesos:</div>
                   <div style="float:left"><input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" 
                    style="min-width:250px;" readonly /></div>
           </div> 
        </td>
    </tr>
</table>

Question:

• Is it really possible to be dynamic even though my input is disabled? If yes how? if no why?

Requirements:

• The minimum width of my input Pesos should be 250px because it needs to be aligned to other input.

• My problem is only with the input of Pesos

• HTML, CSS or Javascript solution is accepted.

• I think I don't need to include my css styles anymore since it would not be needed. If css is the solution just add a new class.

• I prepared a jsfiddle here

Answer 1

Using only CSS, one cannot make an <input> expand its size based on content. It is possible via Javascript, though (see Rayon Dabre's solution).

But the simple answer here would be to use an element that naturally expands to show its content, like a <span>, and style it to look like an input:

From your picture, I'm approximating something close to :

span.disabledInput {
  display: inline-block;
  background-color: #F0F0F0;
  border-radius: 6px;
  border: 1px solid #EEE;
}

You can even make it editable. Here's a more convincing example:

.form-control.disabledInput {
  height: initial;
  background-color: #eee;
  border: 1px solid #ccc;;
  display: inline-block;
  clear: left;
  width: auto;
  color: #666;
  box-sizing: border-box;
}
.form-control.disabledInput:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-group.col-xs-12 label {
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">

  <div class="row">
    <div class="form-group col-sm-6">
      <label for="checkNumber">Check Number:</label>
      <input type="password" class="form-control" name="checkNumber" id="checkNumber">
    </div>
    <div class="form-group col-sm-6">
      <label for="checkDate">Check Date:</label>
      <input type="text" class="form-control" name="checkDate" id="checkDate" readonly>
    </div>
    <div class="form-group col-sm-6">
      <label for="clientName">Client Name:</label>
      <input type="text" class="form-control" name="clientName" id="clientName" readonly>
    </div>
    <div class="form-group col-sm-6">
      <label for="amount">Amout:</label>
      <input type="text" class="form-control" name="amout" id="amount" readonly>
    </div>
    <div class="form-group col-xs-12">
      <label>Pesos:</label>
      <span type="text" tabindex="0" contenteditable="true" class="form-control disabledInput">To make this <code>span</code> not editable, remove the <code>contenteditable</code> attribute... <br />Don't forget to resize your browser!</span>
    </div>
  </div>

If you want to match the exact styling, you should inspect the disabled <input>. Pay close attention to line-height, font-size, padding and margin properties. Also, don't forget to add the tabindex attribute so it can be :focus-ed, like the real <input>s in the page.

Now, because your input is disabled, that's about all you need to do.

However, if your fake "input" wasn't disabled you'd have to add contenteditable="true" to it. And if it had to be part of your form on submission, you'd also have to add an <input type="hidden"> that would change its value to match the .text property of your <span>. Again, resorting to JavaScript.

Answer 2

It is not expanding because it’s a part of your first column. It just cannot go on the second one.

To fix it, add

<td colspan='2'>

on your last TD (To indicate it to take space of both columns)

Example : http://reference.sitepoint.com/html/th/colspan/demoframe

Answer 3

Consider static constant as the width of the character Which can not be accurate by the way as H and I can not consume same space.

Try this:

document.getElementById('amountInWords').style.width = document.getElementById('amountInWords').value.length * 7 + 'px'

<table width="100%">
  <tr>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabelBold">Check Number:</div>
        <div style="float:left">
          <input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
        </div>
      </div>
    </td>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Check Date:</div>
        <div style="float:left">
          <input name="checkDate" class="checkDate text ui-widget-content ui-corner-all" style="width:250px;" readonly />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Client Name:</div>
        <div style="float:left">
          <input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly />
        </div>
      </div>
    </td>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Amount:</div>
        <div style="float:left">
          <input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div style="height:35px">
        <div style="float:left" class="controlLabel">Pesos:</div>
        <div style="float:left">
          <input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" style="min-width:250px;" value="One Thousand Nine Hundred Forty Nine Pesos only and this is fake msg" readonly />
        </div>
      </div>
    </td>
  </tr>
</table>