PDA

View Full Version : Text alignment issues



DSoa
17 Jul 2012, 1:20 PM
I'm having problems lining up text horizontally across widgets. Here's a screenshot that I added red lines to to show the alignment problems:
37250

How can I get the text to line up across these? In the case of checkboxes, it looks like it aligns the box and not the text. I especially don't understand why the labels don't align in the last case (Property and Project Name don't align).

Thanks.

scottmartin
17 Jul 2012, 1:52 PM
I created a quick layout in Architect and it seems ti line up as expected:
Please note the combo is centered to the text height



Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',

height: 184,
width: 540,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'My Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'radiogroup',
fieldLabel: 'Label',
flex: 1,
items: [
{
xtype: 'radiofield',
boxLabel: 'Box Label'
},
{
xtype: 'radiofield',
boxLabel: 'Box Label'
},
{
xtype: 'radiofield',
boxLabel: 'Box Label'
}
]
},
{
xtype: 'checkboxgroup',
fieldLabel: 'Label',
columns: 1,
vertical: true,
flex: 2,
items: [
{
xtype: 'checkboxfield',
boxLabel: 'Box Label'
},
{
xtype: 'checkboxfield',
boxLabel: 'Box Label'
},
{
xtype: 'checkboxfield',
boxLabel: 'Box Label'
}
]
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Label',
flex: 1,
items: [
{
xtype: 'combobox',
fieldLabel: 'Label'
}
]
}
]
});

me.callParent(arguments);
}

});

DSoa
18 Jul 2012, 7:42 AM
Thanks. Maybe what I expect isn't what is expected? :-) The last labels do line up, but the radiogroup and checkboxgroup labels don't line up with the radio and checkbox labels. Here's a screenshot from my jsfiddle of your sample (http://jsfiddle.net/UehL7/)
37293

scottmartin
19 Jul 2012, 7:05 AM
I will take another look. I created the layout in Architect(SA) and it seemed to line correctly .. perhaps it was very late ;)

However, please note that your jsFiddle is using 4.1.0 and CSS from 4.02a

I will try this again in SA

Scott.

scottmartin
19 Jul 2012, 7:22 AM
Here is what I created ... same code as pasted.

37329

Scott.

DSoa
1 Aug 2012, 9:46 AM
Here's the culprit for the checkbox label alignment issue. The following CSS is applied to the td element from ext-all.css:

.x-form-checkboxgroup-body {
padding: 1px 4px 1px 4px;
}

Take that away and it lines up including the check box vertical alignment with other fields in the same column.