2
votes

How can I wrap very long titles in a form and a fieldset?

I took this code from Sencha's docs and simply added a long title, and added a width. Unfortunately, the title is truncated with ellipsis.

Here's what it looks like: enter image description here

Here's the modified Sencha source: (http://docs.sencha.com/touch/2.2.1/#!/api/Ext.form.FieldSet)

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'How much wood would a woodchuck chuck if a woodchuck could chuck wood?',
            width: 300,
            instructions: 'Tell us all about yourself',
            items: [
                {
                    xtype: 'textfield',
                    name : 'firstName',
                    label: 'First Name'
                },
                {
                    xtype: 'textfield',
                    name : 'lastName',
                    label: 'Last Name'
                }
            ]
        }
    ]
});
1

1 Answers

1
votes

Try the Ext.field.Field labelWrap config.

Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'How much wood would a woodchuck chuck if a woodchuck could chuck wood?',
            width: 300,
            instructions: 'Tell us all about yourself',
            items: [
                {
                    xtype: 'textfield',
                    name : 'firstName',
                    label: 'First Name',
                    labelWrap : true
                },
                {
                    xtype: 'textfield',
                    name : 'lastName',
                    label: 'Last Name',
                    labelWrap : true
                }
            ]
        }
    ]
});

EDIT

Sorry, I misread part of that.

I will in no way claim to be a CSS expert...however this worked for me:

.x-form-fieldset-title {
    white-space: normal;
}

That will affect each of your title, you may want to try and single out just the title that is too long.

Good luck, Brad