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

  1. #1

    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.
  2. #2

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

    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?
  3. #3

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

    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.

  4. #4

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

    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.


    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;
    }






  5. #5

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

    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.
                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);
                    }
                }
            });
  6. #6

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

    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!

Similar Threads

  1. Replies: 2
    Last Post: May 01, 2012, 5:57 PM
  2. Not working: filter search, drop-down list
    By andersgunnare in forum 1.x Help
    Replies: 4
    Last Post: Jun 07, 2011, 7:45 PM
  3. Static List
    By pc.cotemig in forum 1.x Help
    Replies: 0
    Last Post: May 31, 2011, 3:15 PM
  4. List of Icons?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jan 05, 2011, 5:31 PM
  5. [1.0] Wish List
    By r_honey in forum Open Discussions
    Replies: 2
    Last Post: Jan 14, 2010, 8:45 AM

Posting Permissions