extjs shrink area between displayfields (labels and values) - css

Question

how do I shrink the area between these displayfields?
I've tried moving padding... margins... nothing seems to work. When I do end up getting the labels the way they should look (with very little space)... then the values are not aligned next to the label correctly.
this is how I have it setup.
layout: 'column',
defaults: {
layout: 'form',
xtype: 'container',
//defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
items: [
{
xtype: 'displayfield',
fieldLabel: 'Client',
bind: {
value: '{selectedClientListModel.ClientName}'
},
fieldStyle: 'color: #ff0000; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; padding: 0px; margin: -5px;'
//ui: 'dark'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Desc',
itemId: 'textfieldAcctDesc',
bind: {
value: '{selectedManager.AcctShortCode}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -15px;'
},
{
xtype: 'displayfield',
fieldLabel: 'Acct Num',
itemId: 'textfieldAcctNum',
bind: {
value: '{selectedManager.AcctNum}'
},
fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;',
labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -5px;'
}
]
}, {

Answer 1

displayfields are intended to align neatly with other form fields - which have spacious borders around their input fields. For that reason, displayfields have the same height, they even haven't got a different SCSS variable for displayfield height.
Furthermore, from the CSS classes available, the fieldLabel cannot distinguish between being a displayfield's label and another field's label. Because of that, you will have to give your displayfield at least a custom userCls, or else all your regular form fields will look ridiculous.
Then you can go and add some CSS like this:
.myUserCls,
.myUserCls .x-form-item-label,
.myUserCls .x-form-display-field
{
line-height:16px;
min-height:16px;
margin-bottom:0;
margin-top:0;
padding-top:0;
}
I have made you a fiddle.