Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is there a way to reduce the height of a TextField

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    td input {
    
    height: 15px; /* change to the appropriate height */
    
    }
    Hope that helps!

    Happy coding!

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't know if this is what you mean. But the input box is smaller.
    Check the bolded stuff below.
    Code:
    <!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>

  • #4
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Regards
    Dieter

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't worry guys, I have found the answer.

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

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Dieter Rausch
    Placing topmargin ="0" into the <Body> tag solved the problem.
    Probably better off using CSS:
    Code:
    body {
    	margin-top: 0;
    }

  • #7
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by fredmv
    Probably better off using CSS:
    Code:
    body {
    	margin-top: 0;
    }
    Or even:
    Code:
    body, html { margin: 0; padding: 0 }
    to get round all browser inconsistencies.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #8
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    I have tried both suggestions and both work.



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •