User Menu not scrolling properly

Our Kanban Task Board for easy management of tasks and agile workflows
Post Reply
User avatar
stephan.goseberg
Posts: 23
Joined: Mon Nov 19, 2018 3:53 pm

User Menu not scrolling properly

Post by stephan.goseberg » Wed Jan 09, 2019 8:04 pm

Hi,
I am testing the TakBoard component and having a problem with the User Menu.
I am setting a maxHeight for the user menu and adding srcollable:{x: false, y: true}.
The up and down triggers are shown in the menu's top and bottom, but they will only scroll one item up/down although there are many more items in the list. Also mouse-wheel scrolling doesn't work at all.
Is there a way to fix the scrolling and enable mouse-wheel scrolling?

Many thanks,
Stephan

User avatar
Animal
Core Developer
Core Developer
Posts: 40
Joined: Fri Oct 13, 2017 12:36 pm

Re: User Menu not scrolling properly

Post by Animal » Thu Jan 10, 2019 10:46 am

Without more information like a small example running in Sencha's fiddle, it's extremely difficult to know what the code is doing.

Ext Menus, like all other Ext Components scroll if you configure them scrollable.

See this example: https://fiddle.sencha.com/#view/editor&fiddle/2ov3

User avatar
Animal
Core Developer
Core Developer
Posts: 40
Joined: Fri Oct 13, 2017 12:36 pm

Re: User Menu not scrolling properly

Post by Animal » Thu Jan 10, 2019 11:58 am

Well, that was for Ext Modern which of course works out of the box.

In fact, Ext Classic has a bad problem with scrolling in Menus. Seems a bug got in there after 6.0. Which was when the "Toolbar" example which illustrated overflowing menus got removed because we were emphasizing Kitchen Sink as the sole showcase.

We forgot to eat our own dogfood, and paid the price!

I have updated that fiddle to use a ScrollableMenu class which extends Menu which you can use. Be sure to look at the associated CSS file. It uses flexbox to arrange itself correctly, so this must run on browsers which support flexbox.

User avatar
Animal
Core Developer
Core Developer
Posts: 40
Joined: Fri Oct 13, 2017 12:36 pm

Re: User Menu not scrolling properly

Post by Animal » Thu Jan 10, 2019 12:14 pm

OK, it's not a bug. Using scrollable is incompatible with the way menus are layed out. They are vbox layout with a special overflow handler which puts those arrows top and bottom and adds a mousewheel listener.

Adding scrollable: true to that setup adds scrolling on the outermost element which won't work.

If you want normal scrolling, and *not* the Vbox's scroll handling, use this: https://fiddle.sencha.com/#view/editor&fiddle/2ov8

User avatar
stephan.goseberg
Posts: 23
Joined: Mon Nov 19, 2018 3:53 pm

Re: User Menu not scrolling properly

Post by stephan.goseberg » Fri Jan 11, 2019 5:07 pm

That's excellent and exactly what I needed!
Thanks Animal!

User avatar
stephan.goseberg
Posts: 23
Joined: Mon Nov 19, 2018 3:53 pm

Re: User Menu not scrolling properly

Post by stephan.goseberg » Fri Jan 11, 2019 5:16 pm

Seems I was happy too early. It does work only the first time the user menu is opened by clicking the icon at the lower right corner of the event. Then it shows the scroll bar at the right edge of the menu. But when I then open the menu on another event it doesn't have the scroll bar nor can I scroll using the mouse wheel.
So this must have to do with the implementation of the user menu in the TaskBoard component.
What I do is simply

Code: Select all

Ext.apply(me, {
            userMenu: new Kanban.menu.UserMenu({
                resourceStore: me.resourceStore,
                layout: 'vbox', // <- don't allow it to default
                scrollable: {
                    x: false,
                    y: true
                },
                maxHeight: 500
            }),......................................
Any idea what the cause could be and how to fix it?

User avatar
stephan.goseberg
Posts: 23
Joined: Mon Nov 19, 2018 3:53 pm

Re: User Menu not scrolling properly

Post by stephan.goseberg » Fri Jan 11, 2019 7:36 pm

Since I have problems in creating a Fiddle with the TaskBoard component I have placed it here: http://dsp.tenderix.com/p3m/kanban/main.aspx
When you click on the user menu icon it shows the menu properly with scrollbar and respecting the maxHeight:500. But when clicking on any other (or the same ) user menu then it shows without scrollbar and also doesn't respect my maxHeight setting.
Any idea why?

User avatar
Animal
Core Developer
Core Developer
Posts: 40
Joined: Fri Oct 13, 2017 12:36 pm

Re: User Menu not scrolling properly

Post by Animal » Sat Jan 12, 2019 1:30 pm

Yes, there's a bug with maxHeight. I have reported it to Sencha.

I have added a workaround in https://fiddle.sencha.com/#view/editor&fiddle/2ov8

User avatar
stephan.goseberg
Posts: 23
Joined: Mon Nov 19, 2018 3:53 pm

Re: User Menu not scrolling properly

Post by stephan.goseberg » Sat Jan 12, 2019 8:46 pm

That workaround did the trick.
Thanks again, Animal!

Post Reply