PDA

View Full Version : [Solved] Title Wrap - Form Panel Problem



karthik085
22 Jul 2010, 3:21 PM
Hi,
I have a form panel - but, title does not seem to get wrapped as shown in the attachment . Code below.
Any suggessions?

21601

It happens in IE8.



new Ext.FormPanel({
labelWidth: 5,
id: 'form',
frame:true,
title: 'test',
bodyStyle:'padding:5px 0px 0 1px',
width: 200,
defaults: {width: 200},
items: {
xtype: 'fieldset',
title: 'Lores Ipsum Lores Ipsum Lores Ipsum Lores Ipsum',
border: false,
autoHeight: true,
defaultType: 'checkbox',
items: [{
xtype: 'textfield',
name: 'txt-query',
fieldLabel: ''
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox1',
name: 'Checkbox1',
checked: true
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox2',
name: 'Checkbox2',
checked: true
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox3',
name: 'Checkbox3',
checked: true
}]
}})

dorgan
22 Jul 2010, 3:53 PM
labelwidth should be in default section....and I would highly recommend setting it higher than 5

karthik085
23 Jul 2010, 5:01 AM
Putting labelWidth in default section (even with higher value) didn't solve the problem. It just moved textfield and checkboxes farther to the right. Any other suggestions?


labelwidth should be in default section....and I would highly recommend setting it higher than 5

Condor
23 Jul 2010, 5:56 AM
1. You want hideLabels:true instead of labelWidth:5.
2. This will display correctly if you give the textfield and the checkboxes a width (try defaults:{anchor:'0'} in the fieldset).

karthik085
23 Jul 2010, 6:28 AM
That helped a little - added hideLabels:true, set defaults:{anchor:'0'} and width as suggested
but query and checkboxes are shifted to the right.

21624

I would like something as shown in attachment 2.
21623

How can I do this?


1. You want hideLabels:true instead of labelWidth:5.
2. This will display correctly if you give the textfield and the checkboxes a width (try defaults:{anchor:'0'} in the fieldset).

Condor
23 Jul 2010, 6:53 AM
Looks fine to me:

new Ext.FormPanel({
//labelWidth: 5,
id: 'form',
frame: true,
title: 'test',
bodyStyle: 'padding:5px 0px 0 1px',
width: 200,
autoHeight: true,
defaults: {
//width: 200
anchor: '0'
},
items: {
xtype: 'fieldset',
title: 'Lores Ipsum Lores Ipsum Lores Ipsum Lores Ipsum',
border: false,
autoHeight: true,
defaultType: 'checkbox',
hideLabels: true,
defaults: {
anchor: '0'
},
items: [{
xtype: 'textfield',
name: 'txt-query',
fieldLabel: ''
},
{
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox1',
name: 'Checkbox1',
checked: true
},
{
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox2',
name: 'Checkbox2',
checked: true
},
{
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox3',
name: 'Checkbox3',
checked: true
}]
}
});

karthik085
23 Jul 2010, 9:41 AM
How does it look in IE 8? I tried the same code posted as well and it looks like in the attachment. For some reason, title is showed in the back.

Looks good in Firefox though.

21632


Looks fine to me:

new Ext.FormPanel({
//labelWidth: 5,
id: 'form',
frame: true,
title: 'test',
bodyStyle: 'padding:5px 0px 0 1px',
width: 200,
autoHeight: true,
defaults: {
//width: 200
anchor: '0'
},
items: {
xtype: 'fieldset',
title: 'Lores Ipsum Lores Ipsum Lores Ipsum Lores Ipsum',
border: false,
autoHeight: true,
defaultType: 'checkbox',
hideLabels: true,
defaults: {
anchor: '0'
},
items: [{
xtype: 'textfield',
name: 'txt-query',
fieldLabel: ''
},
{
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox1',
name: 'Checkbox1',
checked: true
},
{
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox2',
name: 'Checkbox2',
checked: true
},
{
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Checkbox3',
name: 'Checkbox3',
checked: true
}]
}
});

Condor
23 Jul 2010, 11:12 AM
Yes, I didn't try IE8.

For that you'll have to add:

.x-fieldset legend {white-space: nowrap;}

karthik085
23 Jul 2010, 12:16 PM
Nope, that doesn't work either. I tried the solution as suggested in
http://www.sencha.com/learn/Ext_FAQ_Grid#How_to_wrap_contents_within_a_cell_of_a_fixed_width_grid_column.3F

This is what happened: partial title can be seen only.
21638

Any other suggestions?


Yes, I didn't try IE8.

For that you'll have to add:

.x-fieldset legend {white-space: nowrap;}

Condor
25 Jul 2010, 4:46 AM
Multiline fieldset legends are not supported.

Do you really need a fieldset? Can't you just add a plain text above the fields?

karthik085
28 Jul 2010, 10:40 AM
This worked! Thanks!


Multiline fieldset legends are not supported.

Do you really need a fieldset? Can't you just add a plain text above the fields?