HTML Input box behaving strangely...

[sujitksharma]

Hi,

Following is a simple html which has a table with one "<tr>" and two "<td>". Both the "<td>"s have a fixed width of "150px". In one "<td>" I have put some long text, while in the second "<td>" I have an input box of type text which is a style width of "98%" and the same long text as in first "<td>".

Code:
<HTML>
<BODY>
<TABLE border="1" width="300px">
<TR>
<td id="1" width="150px">
asdf sdafasdf sadf sadfasdfasdf sdafasdf sadf sadfasdfasdf sdafasdf sadf sadfasdfasdf sdafas
</td>
<TD width="150px">
<input type="text" style="width:98 %;border:1px solid red;" value ="asdf sdafasdf sadf sadfasdfasdf sdafasdf sadf sadfasdfasdf sdafasdf sadf sadfasdfasdf sdafas"/>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

PROBLEM:
Why is the second "<td>" having a strangely big size event when I have fixed its width to be "150px"? Same works fine when the value of the "<input>" is reduced to fewer chars. The widht of the second "<td>" is directly proportional to the lenght of the text on the input text box inside it, why?

[Tog]

This is probably because you are populating a text input field with too many characters for the table width, and you are mixing absolute and relative width dimensions.

You have set most of the widths absolutely anyway, so you could solve the problem by changing the relative width "98%" to an absolute width "147"

Hope this helps

Tog

[sujitksharma]

Hi Tog,
Thanks for help.

You are correct that if I provide an absolute width for the text box then it shall solve the problem.

But actually the real problem is a complex scenario that what I have presented in my post. Actually, its possible here to shay that the absolute width of the text box should be 147 (i.e. around 98% of 150), but in real scenario the width of the table itself is relative and hence its not possible to determine an absolute value.

As per theory, when we specify a relative width for a child element than it takes the relative width of its parent.

My problem here is, how come the length of text in the textbox determining the width of the textbox?