PDA

View Full Version : textfield label alignment



georgewr3
4 Oct 2011, 11:18 AM
Why in IE, FF and Chrome, creating a textfield with a left aligned label renders the label off center vertically. It's not aligned along the top or center and the baseline of the text isn't vertically centered either.

How do I force the text of the label to be dead center vertically with the textfield box?

georgewr3
11 Oct 2011, 12:55 PM
Anyone?

skirtle
12 Oct 2011, 12:38 AM
Seems fine in the demos:

http://dev.sencha.com/deploy/ext-4.0.2a/examples/form/dynamic.html

Are you sure you don't have some other CSS messing it up?

Could you post a code example that demonstrates this problem? Perhaps a screenshot may help?

georgewr3
12 Oct 2011, 11:26 AM
*** Javascript

var loginPanel = new Ext.Panel({
id: 'loginPanel',
layout: {type: 'absolute', align: 'center'},
width: 600,
height: 320,
// Child components
items: [{
x: 30,
y: 40,
width: 500,
height: 50,
xtype: 'textfield',
fieldLabel: 'Username',
readOnly: false,
id: 'loginUID'
}, {
x: 30,
y: 130,
width: 500,
height: 50,
xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Password',
readOnly: false,
id: 'loginPWD'
},
... <rest of function doesn't apply>

*** CSS

#loginPanel {
padding-top: 6px !important;
padding-bottom: 6px !important;
padding-left: 6px !important;
padding-right: 6px !important;
background-color: #EEEEEE !important;
font-family: 'Arial';
font-size: 24px;
font-weight: bold;
}

#loginUID .x-form-item-label,
#loginUID .x-form-item-body,
#loginUID .x-form-field,
#loginPWD .x-form-item-label,
#loginPWD .x-form-item-body,
#loginUID .x-form-field {
font-family: 'Arial';
font-size: 18px;
font-weight: bold;
vertical-align: middle;
}

That's it. I can't see anything that would cause the offset. Thanks for taking a look.

http://www.sencha.com/forum/image/png;base64,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

skirtle
12 Oct 2011, 6:41 PM
Please use CODE tags when posting code (# button on the editor toolbar).

OK, so this is happening because you've set the height of the textfields to 50. If you want to do that you'll need to set the padding-top on your x-form-item-label to be about 12px.

georgewr3
13 Oct 2011, 11:27 AM
Perfect, Thank you.