Jack 0

I am trying to minimize the size of a container vertically. However, there is a text-field within that container whose field is larger than that of its contents.

I have tried changing the height of the text-field, but it never works. It seems like it has to do with the font-size, rather than the height of the box.

So if I have the text-field at auto height I get this:

alt text

The black line is the blinking cursor. I want the length of that cursor and orange box that indicates it is focused on the item to be the same (or close to) the length of the actual height of the text. The arrows and and the dollar sign are absolutely placed so they shouldn't affect anything.

Here is what it looks like if I change the height of the text field to something very small (padding still there):

alt text

Using a debugger I can confirm that there is no padding being calculated on the form input itself... This is across all browsers. Thank you for any help!

1 answer


Try looking at your lineheight:

textarea { padding: 0; line-height: .9em }
textarea * { margin: 0; padding: 0; line-height: .9em }

Have you tried:

textarea, textarea * { 
    height: .9em;
    overflow: hidden;
    text-indent: -1px;

What is your markup and relevant CSS? Are you using the right doctype? Is your (X)HTML valid?

Answered almost 9 years ago by Jake Teton-Landis
  • Nope... Not changing anything, although the property is being applied to the field Jack almost 9 years ago