Is there a way to reduce the height of a TextField

Dieter Rausch

01-02-2004, 10:47 PM

Hi CF users,

I have created a table with 6 rows and 4 column having various labels and text fields. Below is part of the code:

<table "border="0" cellspacing="0" width="100%" height="100%">
<tr style="font-family: Verdana, Tahoma, Arial; font-size: x-small">
<td>Cap.(R):</td>
<td align="right"><input type="text" name="riskCapital" size=6></td>
<td>Entry:</td>
<td align="right"><input type="text" name="tradeEntry" size="5"></td>
</tr>

etc., etc.

</table>

This table has to fit into an area with a height slightly smaller than that of the table. The text sizes of the labels are not the problem, i.e <td>Cap.(R):</td> is OK.

It the height of the input text fields, i.e <td align="right"><input type="text" name="tradeEntry" size="5"></td> which prevents the table from fitting into the allocated space.

How can I reduce the height of the input text fields so that the table will fit. Should I perhaps not be using a table at all?

Any help will be appreciated.

Dieter

nolachrymose

01-03-2004, 12:55 AM

td input {

height: 15px; /* change to the appropriate height */

}

Hope that helps!

Happy coding! :)

Oakendin

01-03-2004, 01:03 AM

Don't know if this is what you mean. But the input box is smaller.
Check the bolded stuff below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">

#testing {font-family: verdana; font-size: xx-small;}

</style>
</head>

<body>
<form>
<table border="2" cellspacing="0" height="100%">
<tr style="font-family: Verdana, Tahoma, Arial; font-size: x-small">
<td>Cap.(R):</td>
<td><input type="text" name="riskCapital" size=6 id=testing></td>
</tr>
<tr>
<td>Entry:</td>
<td><input type="text" name="tradeEntry" size="5"></td>
</tr>
</table>
</form>

</body>
</html>

Dieter Rausch

01-03-2004, 09:08 AM

Fantastic!

After searching the web for hours and not finding any answers this problem is solved. I could not get the first code, i.e.

td input {
height: 15px; /* change to the appropriate height */
}

to work. I guess I am still too inexperienced. However, the second code , i.e.

<html>
<head>
<title>Untitled</title>
<style type="text/css">

#testing {font-family: verdana; font-size: xx-small;}

</style>
</head>

<body>
<table border="2" cellspacing="0" height="100%">
<tr style="font-family: Verdana, Tahoma, Arial; font-size: x-small">
<td>Cap.(R):</td>
<td><input type="text" name="riskCapital" size=6 id=testing></td>
</tr>
<tr>
<td>Entry:</td>
<td><input type="text" name="tradeEntry" size="5"></td>
</tr>
</table>

works well and solved my problem w.r.t. the input field height.

Thank you very much! :)

Now, I still have another challenge. Using "font-family: arial; font-size: 9px" is the smallest I can go before the user's input becomes illegible. This is not sufficient to fit the table. Setting scrolling="yes" and then manually centering the vertical scrollbar makes the table fit perfectly, with little unused space at the top.

Is it possible to reduce the standard unused space (approx. 4mm) via appropiate coding?

Please let me know. :confused:

Regards
Dieter

Dieter Rausch

01-03-2004, 09:56 AM

Don't worry guys, I have found the answer.

Placing topmargin ="0" into the <Body> tag solved the problem.

fredmv

01-03-2004, 12:55 PM

Originally posted by Dieter Rausch
Placing topmargin ="0" into the <Body> tag solved the problem. Probably better off using CSS:body {
margin-top: 0;
}

me'

01-03-2004, 05:26 PM

Originally posted by fredmv
Probably better off using CSS:body {
margin-top: 0;
} Or even:body, html { margin: 0; padding: 0 }to get round all browser inconsistencies.

Dieter Rausch

01-03-2004, 11:18 PM

Thanks,

I have tried both suggestions and both work.

:thumbsup: