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

why cant you store that inside an hidden variable and update the content in div? — Mithun Shreevatsa, Mar 07 '16 at 07:19
First of all i will not recommend table layout. Use div instead. — ketan, Mar 07 '16 at 07:21
@GeneR read https://www.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/ and also http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — ketan, Mar 07 '16 at 07:24
@RayonDabre its from json. I added a jsfiddle i temporary just added a value to show its problem. — bot, Mar 07 '16 at 07:27
@ketan thanks. I'll try what i can do to my design later but as of now I'll try to focus with my problem. — bot, Mar 07 '16 at 07:29
@ketan i will disagree, but lets not start the holy war tho. — Gene R, Mar 07 '16 at 07:31
@GeneR `` and `display:table` should only be used for tabular data, not for layout. If people used tables for what they were meant, we would have seen features like pagination and sorting implemented by most browsers by now on table elements. — tao, Mar 07 '16 at 08:44

score 2 · Accepted Answer · edited May 23 '17 at 11:50

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.

Jurion · Answer 2 · 2016-03-07T07:49:13.523

1

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

edited Mar 07 '16 at 07:49

answered Mar 07 '16 at 07:33

Jurion

1,230
11
18

score 1 · Answer 3 · answered Mar 07 '16 at 07:41

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>

So powerful it breaks the layout. :) – tao Mar 07 '16 at 07:44 — tao, Mar 07 '16 at 07:44

Dynamic width for a disabled input data

3 Answers3