Text within input (inside a table td) is not showing properly with IE9 when text length is less than the length of td

Question

I have an input field inside a td:

<td title="" style="" role="gridcell">
   <input type="text" readonly="true" value="some_long_string_comes_here" style="background-color:transparent;border:0px solid white;">
</td>

The length of the text is less than the length of td. It is OK at Firefox but at Internet Explorer 9 I can not see the whole text.

EDIT 1: Reason is that: there is no width - size - maxlenght etc. for input but input element's length is less than the text. At Firefox it is equal to text's length. I don't want to use any special attributes as like width.

EDIT 2: Here is the screen shot when I hover mouse to the input field at debug mode:

You can see only some_long_string_comes instead of some_long_string_comes_here

Any ideas?

Answer 1

The width of an <input type="text"> element is by default20 “average” characters. Browsers differ in their idea of “average”, and they may use different default fonts, so that widths of characters vary. But the rendering is not very different across popular browsers with their default settings

The width can be changed using the size attribute or by setting width in CSS. It does not depend on the content or on the width of the parent element (unless you set the input element’s width in a manner that creates such a dependency, using the % unit).

If you have some data that you wish to show to the user and also pass forward as form data, as readonly, then you get more flexibility if you separate these functions. Put the data as normal content, e.g. in a span element (to be able to style it) and separately into a hidden field:

<input type="hidden" value="some_long_string_comes_here" name="foo">
<span class="show">some_long_string_comes_here</span>

I have added a name attribute, since without it, the field does not give any contribution to the form data.

In this approach, the visible text appears as normal text by default.