PDA

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



kerbo
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.

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

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

kerbo
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.

nicktak
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.

nicktak
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;
}

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

Tim

jayrobinson
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".

Stormseeker
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
.x-form-item


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?

Thanks,
Tim