View Full Version : [CLOSED-599] DisplayField Alignment Problems

1 Dec 2009, 11:05 AM
If I use a DisplayField with the smaller font size, the value doesn't line up with the field label (see pic)

This is the code I use to create the field:

fld = new Ext.form.DisplayField({
fieldLabel: 'Last Updated',
name: 'linked_update_date',
ctCls: 'x-small-editor',
labelStyle: 'font-size:11px;width:70px;',
style: {fontSize:'11px',color:'blue'}

Does anyone know what adjustments I need to make in the css to get the alignment correct?

As an aside, I find many things in ext don't quite align correctly using the smaller font. It seems all the testing is done with the larger font. I'd be curious how many people use the larger font size vs. the smaller font size for their forms.

1 Dec 2009, 11:21 PM
try this...

style: {fontSize:'11px',color:'blue',padding:'4px'}

2 Dec 2009, 7:32 AM
Thanks, padding does work (3px in my case).

I'm hoping the Ext folks will pick up on this note and consider simplifying the hoops we sometimes have to run through just to create a basic data entry form. If I want my field to be 11pt font, I should specify it as an attribute and it should work. I shouldn't have to know css kind of things and experiment to figure it out.

17 Feb 2010, 6:47 PM
@kerbo I completely agree with you. This component should just work. Glad there is a workaround for it, though.

17 Feb 2010, 7:19 PM
Suggested patch for ext-all.css (or in your own css)

.x-form-display-field, .ext-gecko .x-form-display-field, .ext-strict .ext-ie7 .x-form-display-field {
display: block;
padding: 3px 0px 0px 0px;
padding-left: 0px;
position: relative;
z-index: 2;

19 Feb 2010, 1:03 PM
@nicktak Worked perfectly for me. Thanks!


23 Feb 2010, 10:41 AM
Maintaining different font-sizes than the default is customization and you will have to feel comfortable adjusting the CSS to make it work visually.

There are too many elements inside of a complex form to make every font-size "just work".

24 Feb 2010, 8:21 AM
I'm using Windows SP3 with Internet Explorer 8. I'm getting this issue and I don't think I'm changing the font-size in my app. When I inspect the "value" portion of the displayField in firebug I see from ext-all.css

font: 12px tahoma, arial, helvetica, sans-serif

.ext-strict .ext-ie8 .x-form-display-field

padding-top: 0px

However when I inspect the "label" portion of the display field, I see this:
.x-form-item LABEL.x-form-item-label

z-index: 2
padding-top: 3px

Wouldn't that make the label portion and the value portion misaligned?