By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

HTML Input box behaving strangely...

P: 2
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?
Feb 13 '07 #1
Share this Question
Share on Google+
2 Replies


Tog
P: 11
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
Feb 13 '07 #2

P: 2
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?
Feb 16 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.