ansaurus

Question

How can I equalize the heights of text input fields?

Answer 1

A:

Maybe I'm off base but have you tried using line-height values?

Montane 2010-04-16 17:31:26

Answer 2

A:

Couldn't you just explicitly set the hight of all input and select fields to a specific pixel height using CSS? If it doesn't "look" like the same height because of borders, remove the borders or set them all uniformly in the same way. For example:

<html>
  <body>
    <input type=text style="border: 1px solid black; height: 37px;">&nbsp;
    <select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>&nbsp;
    <input type=button style="border: 1px solid black; height: 37px;">
  </body>
</html>

This makes all three form fields 37 pixels high. Works on IE and Chrome, but I haven't tested it elsewhere.

Alternately, once the page has loaded, loop through all form fields, find the largest one, and set the hight of the others using their style.height attribute.

Sparafusile 2010-04-16 17:49:23

The problem is that different box-sizing models treat the concept of height differently, and there appears to be inconsistency across the browsers in terms of which box-sizing models are applied to which controls.

David 2010-04-17 12:18:02

See my edits. There are ways around what you mentioned, you just have to try different styles.

Sparafusile 2010-04-19 17:21:30

Answer 3

+2 A:

Yeah.. this is extremely difficult.
Dont forget that there are issues with firefox treating form elements differently as well. cross browser form manipulation is impossible at best. :D

Some things to note. line-height can't be used on all elements.. ie. firefox hard codes a line height to input[type=text] elements.

I have an article on using inline-block and vertical align, which may help some.. (use verital-align:baseline;) The Joys of Inline Block at screwlewse.com

Also keep in mind that many newer browsers have this added chrome to make the form inputs to look more like the OS. (but that looks like a different issue)

2010-04-17 01:39:16

ansaurus

tags:

views:

answers:

How can I equalize the heights of text input fields?

related questions