ExtJS 4.2 How to set grid filter height when header text is wrapped?

Question

I have a grid with many columns, each of them has a filter, and some of the columns has a long text in the header:

I added a css rule to wrap text in the header:

.x-column-header-inner .x-column-header-text { white-space: pre-wrap; }

In result I got filters with different height:

How to make the same height filters?

How did you get these filter fields. I'm looking for this but didn't yet find. — Lorenz Meyer, Feb 19 '14 at 16:47
@LorenzMeyer it's `triggerfield` added to items of a custom column. — Ctacus, Feb 21 '14 at 13:40
If my answer doesn't help you, consider adding some code in order to get help. — Lorenz Meyer, Feb 25 '14 at 13:54

score 1 · Answer 1 · edited May 23 '17 at 12:10

1

I implemented the search filter with your hint. You can find it here. I didn't have your issue with long column labels. They just cut off using an ellipsis like it is the standard behavior in ExtJs.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 25 '14 at 13:54

Lorenz Meyer

19,166
22
75
121

score 0 · Accepted Answer · answered Feb 26 '14 at 09:52

I've solved my issue by including search filters into fieldcontainers, and using vbox layout with pack at the end.

items: [
    {
        xtype: 'fieldcontainer',
        layout: {
                    type: 'vbox', pack: 'end'
                },
        width: '100%',
        items: [
            {
                xtype: 'triggerfield',
                ...other code...
            }
        ]
    }
]

ExtJS 4.2 How to set grid filter height when header text is wrapped?

2 Answers2

Linked