Bug 32981 – with (large) padding, text string in text input field is not pushed down accordingly.

• Status: UNCONFIRMED
• Component: Forms

[Philippe Wittenbergh]

Created attachment 45545 [details]
minimal testcase

In the test case: an input field (text field, input[type="text"]) has 400px padding-top. However, the text string ('abcd' in textcase) inside the input field is placed in the vertical center (~200px from top).

Expected: test string positioned at the bottom of the textfield.

(test case is a reduction from the search field on YouTube)

Correct: Firefox 3.6 +, Opera 10.0, 10.5, IE 8.
Fails: WebKit latest, Safari 4

See partly related Gecko bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=525897

The Gecko 'bug' is visible on sites such as Apple.com and YouTube.com

[Philippe Wittenbergh]

Created attachment 45547 [details]
screenshot of test case

left: WebKit latest nightly
right: Minefield (Gecko latest nightly)

[Joseph Pecoraro]

There is explicit code in RenderTextControlSingleLine::layout to center the text of an <input type="text"> and <input type="search">. Can anyone comment on whether or not this is something that WebKit wants to fix or not?

[Joseph Pecoraro]

(In reply to comment #2)
> There is explicit code in RenderTextControlSingleLine::layout to center the
> text of an <input type="text"> and <input type="search">. Can anyone comment on
> whether or not this is something that WebKit wants to fix or not?

At r58177:
http://trac.webkit.org/browser/trunk/WebCore/rendering/RenderTextControlSingleLine.cpp#L234

[Adele Peterson]

We do intentionally center text.  It might be to match historical WebKit behavior.  We should not change this without doing significant investigation to make sure we wouldn't regress layout on existing websites.

[Alumni]

(In reply to comment #4)
> We do intentionally center text.  It might be to match historical WebKit behavior.  We should not change this without doing significant investigation to make sure we wouldn't regress layout on existing websites.

Is there any way a developer could achieve the results of all other browsers in webkit?

The following code works in IE6/Firefox/Opera, but not in any webkit browser:

label { position:absolute; top:50px; left:25px; }
input { border:1px solid black; height:100px; padding:70px 25px 10px; width:300px; }
...
<label for="sometext">The text:</label>
<input type="text" id="sometext" placeholder="Enter text here"/>

[Darth]

Downstream bug http://code.google.com/p/chromium/issues/detail?id=76883
Test case from it http://jingwei.li/temp/bug.html

Webkit differs from Firefox.

[Matt]

Are there any plans to fix this misbehaviour? It is really annoying to not be able to proper align the text within input fields. All other major browser are doing this right, except Webkit/Safari.

See this jsfiddle for another test case: http://jsfiddle.net/7Rncd/.