PDA

View Full Version : ExtJS 4.2.1: Textfield contents not vertically aligned in IE



pauljtaylor
30 Jul 2013, 8:04 AM
I'm trying to figure out an override or style to apply to Ext.form.field.Text to vertically align its contents to the center of the input element box in IE8. In every other browser it displays correctly but, of course, our enterprise is exclusively an IE house.

I've created a very simple page to display a Text field:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/extjs-4.2.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="js/extjs-4.2.1/resources/css/ext-all.css"></link>
</head>
<body>
<div id="test"><div>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.form.field.Text', {
height: 60,
width: 200,
renderTo: 'test'
});
});
</script>
</body>
</html>

And below are screenshots:
45115

In other browsers, the text is vertically centered. In IE8, the text is top aligned. I can affect the font, size, and weight of the text by assigning a CSS class to the fieldCls property, but line-height, vertical-align, margin-top, etc., properties have no (desired) effect.

Gary Schlosberg
5 Aug 2013, 10:23 PM
I confirmed the behavior in IE8, but this would seem to be outside of scope due to the uncommonness of setting a height on a textfield. That said, have you tried setting 'padding-top' on the inputEl?