All Options not visible for long list of ListFilters - How to turn on scrolling for the list filter

Hello,

I have a ListFilter which I am dynamically filling the options in the codebehind from sql. The list that returns is very long and the check box list is too big to be displayed on the page and no scrollbars appear so the user can not scroll to all the items in the list. I would like to turn on scrolling for the listfilter so the user can scroll to all of the options in the list.


If what i mentioned above is not possible, I'm also open to any alternative methods of filtering where the user can select multiple items from a list. I thought about using something like the multiheader filter like the one in the examples so I could build my own checkbox list and have control over the overflow to turn on scrollbars. The problem i ran into with that route was that I am using the grouping view for the gridpanel and I do not know how to combine them.


Thanks for you time and your help is appreciated.

quick update. by using firebug I was able to do some testing with css and try to remedy this issue.

my only finding is that if you add the following css styles to the x-menu class


height:200px
<div role="option" class="cssProp editGroup focusRow">overflow:scroll
<div role="option" class="cssProp editGroup focusRow">

<div role="option" class="cssProp editGroup focusRow">the over sized checkboxlists will become scrollable. This seems to cause more problems than it fixes though since it adds scrollbars to all of the column menus and sets the heights uniformly across all menus even if they only include one item.
<div role="option" class="cssProp editGroup focusRow">

<div role="option" class="cssProp editGroup focusRow">still looking for a better fix. Any ideas?

I took a screenshot of this issue. Keep in mind that this is just a quick sample of the problem that I pieced together. Notice how the list upruptly ends at the bottom. Actually this list is much longer and may be twice as long as what is visible but the user would not know because there is no scrollbars that can be added. Well I actually hope they can be added and I just can't figure it out:)



I also caught another issue that is in the same picture. notice how the blank item all the way at the top of the list sits below item number two. This is only the case where the text is blank and also filtering does not work on these blank fields.


It would be fantastic to have a solution to this issue.

FINALLY!

Found the fix through simple CSS on the Extjs forums. Very annoying bug that I can say is finally squashed. Wanted to post this so everyone would have the answer if you are running into the same problem. This also fixes the same overflow issue if you have a lot of columns in your grid and your columns menu list is overflowing off the screen.

Code:

---

ul.x-menu-list
{
height: expression( this.scrollHeight > 350 ? "350px" : "auto" ); /* sets max-height for IE */
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
}

---

Previous CSS Style does not work in ie7 and god knows what else. I was testing in chrome and did not notice the issue until today. I have fixed the issue though using the Javascript override below. Just add it to you <script></script> in the head of your page and you will be good to go. Remove the previous CSS.

Code:

---

            Ext.override(Ext.menu.Menu, {
            showAt: function(xy, parentMenu, /* private: */_e) {
                this.parentMenu = parentMenu;
                if (!this.el) {
                    this.render();
                }
                if (_e !== false) {
                    this.fireEvent("beforeshow", this);
                    xy = this.el.adjustForConstraints(xy);
                }
                this.el.setXY(xy);
                this.assertMenuHeight(this);
                this.assertMenuWidth(this);
                this.el.show();
                this.hidden = false;
                this.focus();
                this.fireEvent("show", this);
            },

            assertMenuHeight: function(m) {
                var maxHeight = Ext.getBody().getHeight() - 150;
                if (m.el.getHeight() > maxHeight) {
                    m.el.setHeight(maxHeight);
                    m.el.applyStyles('overflow-y:auto;');
                }
            },

            assertMenuWidth: function(m) {
                if (m.el.getWidth() < 130) {
                    m.el.setWidth(160);
                }
            }
        });

---

GolchK,

I just wanted to THANK YOU! I was able to use this topic as a reference and fix this very same problem that I was running into. Since you were the only one posting, I know it can be discouraging, but you're helping everyone out!