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


Tags: css,extjs,filter,grid,extjs4

Problem :

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?



Solution :

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...
            }
        ]
    }
]

    CSS Howto..

    How to hide a div class in Wordpress? CSS

    How to get all child elements using an xpath selector?

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    How to link a main.css to all Django templates? [closed]

    How to fix error css width x height when run as mobile

    How to give style (image) for browse button in CSS?

    How to prevent IE from loading hidden content using HTML/CSS only?

    How to show middle of image in div using css?

    How to scale down CSS background-image when using various background-positions?

    How to move this button?

    How can I use dropdowns in a masonry layout?

    How to access CSS on img tag

    how to correctly render a response on an gsp from on the same page as the request (REST call) in grails

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?

    How to make this CSS into a responsive one? [closed]

    CSS - How to align image left bottom to the text block?

    Using CSS, how can I style a div tag to full the width, even when the viewport is scaled?

    How to avoid HTML element being matched by CSS and reset it?

    how to position divs within another div

    How to change comma separated css values with Jquery.css Method?

    How to remove or reset CSS style using JS?

    How to refresh div using ajax refresh?

    How do I calculate percentage based on pixels for CSS conversion?

    CSS: how to make background on left and right of the content

    How to avoid messing formating up?

    How to recursively remove CSS classes

    How to create a line break instead of having text going on top of itself?

    How to clear css cache

    How to do a workaround in css that removes spacing in footer of navigator7 vaadin addon

    how to design like this form in html