13

with the following code:


var win = new Ext.Window({
    xtype: 'form',
    layout: 'form',
    items: [{
        xtype: 'textfield',
        value: 'test',
        name: 'testing',
        labelWidth: 200,
        fieldLabel: 'This is a really, really long label here',
        labelStyle: 'white-space: nowrap;'
    }]

}).show();

This label text overlaps the input section (sorry not enough reputation points to post an image).

I've tried using css with various combinations of: 'cls', 'labelStyle', 'style', and 'width' but they all seem to be ignored (at least in terms of setting the label width properly).
I am adding items to a form dynamically, and I want custom label width's for each element. On other elements, I don't want the default 100px space it reserves for the label - I want less. Is this possible with the standard textfield, or do I have to create a custom component just to do this?

Thanks for any insight provided.

6 Answers 6

19

labelWidth is a config of FormPanel, not of Field. It is rendered and controlled at the form layout level, not at the level of each individual field. The label element itself has nothing to do with the layout of the field container -- if you look at the markup, the label is floated and the field's containing div has left-padding that gives the "label width" you're trying to control. This padding is added in code (by the layout) as a dynamic style to the .x-form-element that wraps the input. To override you'll either have to override the layout code (not trivial) or perhaps use an !important class that overrides the padding per field (using your field's id or a custom cls that you apply).

That said, the label widths should be the same, aesthetically-speaking. Not sure why you'd want to break that convention?

1
  • Thanks for your answer and insight. As you and Shea (below) mentioned, having consistent label widths is standard practice. As I mentioned, the form items (& labels) are dynamically added. The form may contain any number of labels of any length. Giving the labels all a really large width doesn't look aesthetically pleasing when the form only has 1 short label. Thanks for pointing me in the right direction (the label's container). I ended up setting {labelAlign: 'right'} on it's container (and made sure it had a form layout).
    – Gerrat
    Nov 12, 2010 at 21:50
6

If you really have to do this, the easiest way is to define a panel instead of a form field and use it as a container for something different.

{
    xtype: 'form',
    layout: 'form',
    labelWidth: 100,
    items: [
        // {some fields with labelWidth=100},
        {
            xtype: 'panel',
            layout: 'form',
            labelWidth: 200,
            items: [
                xtype: 'textfield',
                value: 'test',
                name: 'testing',
                fieldLabel: 'This is a really, really long label here',
                labelStyle: 'white-space: nowrap;'
            ]
        }
        // {some fields with labelWidth=100}
    ]
}
1
  • No need to use a 'panel', a simple 'box' will do. Less overhead with the 'box' too. But like Brian said, this is strange from a UI perspective to have varying widths for labels. Nov 5, 2010 at 15:47
2

Eventually, you have the option to hack afterRender of the field :

afterRender: function() {
    <PARENT>.prototype.afterRender.call(this);
    this.adjustCustomLabelWidth(300);
},
adjustCustomLabelWidth: function(w) {
    this.el.parent('.x-form-item').child('.x-form-item-label').
            setStyle('width', w);
    this.el.parent('.x-form-element').setStyle('padding-left', w + 5);
    this.ownerCt.on('afterlayout', function() {  
        this.el.setStyle('width', this.el.getWidth() - w + 100);
    }, this, {single: true})
},
2

I try this after several CSS classes to do the same job, I did remove all css after this, works like a charm.

{
    xtype: 'whatever-with-a-field-label',
    name: 'veryMeaningFullName',
    fieldLabel: 'very long description to show above a tiny text field', 
    labelStyle: 'width:400px; white-space: nowrap;', 
    //could use width:100% if you want
    maxWidth: 20
}
  • peace
0

What I did is simply set labelWidth to an empty string and let the browser to do its job. ;-)

{
    id: 'date0'
    ,fieldLabel: 'Start'
    ,labelWidth: ''
    ,xtype: 'datefield'
    ,emptyText: 'Select a start date'
    ,value: Ext.Date.add(new Date(), Ext.Date.DAY, -_duration)
    // ,width: 100
}
2
  • this makes the labels have about 10px width and get covered by the form fields. Apr 15, 2022 at 10:05
  • Dude this answer is literally more than a decade old! You wouldn’t consider voodoo to be modern medicine would you? 😂 Apr 16, 2022 at 15:05
0

Add these properties:

labelWidth: 'auto',
labelAlign: 'right',
labelStyle: 'white-space: nowrap;',

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.