Databases
StackOverflow2013
Postsdbo
POJavascript or jQuery need input field autogrow, but <td> or <div> need to be fixed
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript or jQuery need input field autogrow, but <td> or <div> need to be fixed
    text
    copied!<p>For example 2 HTML rows. The first row is header. The second row is for input. Default width for all <code>&lt;td&gt;</code> is set.</p> <p>User starts to type something in input fields. As length of tex is more than default width of <code>&lt;td&gt;</code> input field starts to autogrow.</p> <p>Here is my example <a href="http://jsfiddle.net/rigaconnect/22Puw/2/" rel="nofollow">http://jsfiddle.net/rigaconnect/22Puw/2/</a></p> <pre><code>&lt;tr&gt; &lt;td width="20"&gt;1&lt;/td&gt; &lt;td width="20"&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="20"&gt; &lt;input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" style="width:20px;"&gt; &lt;/td&gt; &lt;td width="20"&gt; &lt;input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" style="width:20px;"&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>Problem is that <code>&lt;td&gt;</code> also autogrow. </p> <p>Need that <code>&lt;td&gt;</code> always has default (fixed) width; grows only input field and as if goes over <code>&lt;td&gt;</code> on right.</p> <p>Tried to set max width <code>&lt;td style="max-width:20px;"&gt;</code> no solution.</p> <p>Then tried this (for header <code>&lt;td&gt;</code>)</p> <pre><code>&lt;td style="width: 20px; display: inline-block;"&gt;1&lt;/td&gt; &lt;td style="width: 20px; display: inline-block;"&gt;2&lt;/td&gt; </code></pre> <p>but in such case they are in vertical position (not horizontal).</p> <p>Here <a href="http://jsfiddle.net/rigaconnect/RURYw/10/" rel="nofollow">http://jsfiddle.net/rigaconnect/RURYw/10/</a> is example how to do it with drop down fields. Need something similar with input fields.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload