Q-Menu gets squashed and shows scrollbar if it does not fit to the right and to the bottom both.

[BarnabasSzabolcs]

Describe the bug
I use the q-menu component as a contextual menu, showing an "advanced" content (not only a list)
that sometimes does not fit where the menu would be normally located (top-left to target's bottom-left),
and if the right side of the target and the bottom side of the target does not have enough space at the same time,
the q-menu does not only get relocated which works nicely, but the window also gets squashed and the contents appear with a scrollbar.

Codepen/jsFiddle/Codesandbox (required)
Fork a Codepen (https://codepen.quasar.dev) or a jsFiddle (https://jsfiddle.quasar.dev) or a Codesandbox (https://codesandbox.quasar.dev) and hit save then copy-paste link here.

https://codepen.io/barnab-s-szabolcs/pen/dyOmeWd

To Reproduce
Steps to reproduce the behavior:

1. Go to '...' the pen
2. Click on '....' the blue button
3. See error (if the context menu can appear under the target, everything's fine. if not, the context menu gets scrolled, even if it has enough space not to scroll)

Expected behavior
The q-menu appears without scroll, in the displaced location.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):
Quasar Version:
@quasar/app Version:
Quasar mode:
[ x ] SPA
[ ] SSR
[ ] PWA
[ ] Electron
[ ] Cordova
[ ] Capacitor
[ ] BEX
Tested on:
[ x ] SPA
[ ] SSR
[ ] PWA
[ ] Electron
[ ] Cordova
[ ] Capacitor
[ ] BEX
OS: macOS High Sierra 10.13.6 (17G65)
Node: v14.4.0
NPM: 6.14.4
Yarn: 1.21.1
Browsers: Firefox (Interestingly in Chrome the scrollbar first appears then the q-menu resizes itself and the scrollbar disappears)
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.

[BarnabasSzabolcs]

As you can see, q-menu correctly finds a new space around the target because it can't fit anchor="bottom left" self="top left" but it displays the window scrolled, even though it has plenty of space above.

[pdanpdan]

Hello, can you please test if this fixes the problem for you?

In package.json replace quasar dependency with:
"quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.15.4-beta.1"

Then do a yarn or npm install and start the app again.

Please report if you find something not working.

[BarnabasSzabolcs]

Multumesc Dan,
now the scrolling is gone!😎
The only issues that are left:

1. the q-menu window became "jumpy" (first appears at the wrong location then jumps into its correct location).
2. the min-width parameter of q-menu is not respected, unless I apply min-width to an inner div.
3. the window does not stay on the bottom if it does not fit to the right.

(On the screenshots: the q-menu's on the images are still anchor="bottom left" self="top left" and the target is the word that is repeated in bold in the title. The point is that 'imprecise' should be on the bottom left. -- No pun intended.:) I chose the example at random and now I see it is kinda funny:) )

Thanks again for your quick response!

Best,
Barney

[BarnabasSzabolcs]

Hmmm. Maybe it would be worth to make this automatic behaviour disablable. (or force-on-screen="" a/y/x/t/b/l/r)
If a context is scrollable, the context menu scrolls nicely along with the content, so the user can just scroll down,
and the benefit of this is that the user can expect the context menu always at the same location.
The only problematic direction is usually the horizontal overflow to where the user usually cannot scroll.

[pdanpdan]

I cannot reproduce the case with imprecise. From the image it looks like there is no space on the right (so it switches to left) but the space on bottom should be more than enough.
I can only think that the anchor element (or some parent) is fixed positioned - in that case the menu will stay inside the screen, not inside the document.

[BarnabasSzabolcs]

You may be right, the q-menu is within the contents of a q-scroll-area that is eventually within a q-drawer.
And even though the space on the bottom should be more than enough, it likes to get displayed up, and sometimes it even jumps down after appearing up first.

It must be pretty difficult to determine correct positioning for a context menu in a very general case.
It may not be the scope of this issue, but it may be worth investigating repositioning policies that the programmer could set, and not automatically determining this.

[pdanpdan]

If you could prepare a reproduction case for this i can tweak the algorithms a little.
Btw, if you use beta.2 you'll have min-width/height

[BarnabasSzabolcs]

Great job with #quasar-pdan-v1.15.4-beta.2 , the left-right jitter is gone and min-width/min-height is respected! 😎

The up-down jitter is still there, it happens exactly when it is on the border. (I'm not sure why within a q-scroll-area it should get displayed up though if there's enough scrollable space.)
For now, I have updated the pen ( https://codepen.io/barnab-s-szabolcs/pen/dyOmeWd ), I hope it'll help some, I'm not sure though how to add a quasar.umd.min.js from #quasar-pdan-v1.15.4-beta.2 .
With codepen's (old) quasar version there's no jitter the q-menu just gets displayed up, unnecessarily.

Later, I'll try and assemble a small project that reproduces the up-down jumps and the unnecessary up-display when there's scrollable space below.

[BarnabasSzabolcs]

Screen.Recording.mov

[pdanpdan]

https://pdanpdan.github.io/quasar-docs/start/umd#Installation

Clone any example from my branch of the docs, or use a standard quasar codepen and replace the js and css with the ones from the linked page.

The menu only accounts for the space between the anchor point and the window if the anchor is fixed or in a fixed container.

[BarnabasSzabolcs]

Cool cool, thanks, I've updated the pen, https://codepen.io/barnab-s-szabolcs/pen/dyOmeWd
Now, try and set the pen's window to

• 1114×673 - here the q-menu scrolls
• 717×703 - here the up-down jump is observable.

The pen uses:
https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js ( vue@^2.0.0 didn't get accepted by codepen but this vue is 2.6.12 anyway)
https://cdn.jsdelivr.net/gh/pdanpdan/quasar@quasar-pdan-v1.15.4-beta.2/dist/quasar.umd.min.js
https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css
https://cdn.jsdelivr.net/gh/pdanpdan/quasar@quasar-pdan-v1.15.4-beta.2/dist/quasar.min.css

The menu only accounts for the space between the anchor point and the window if the anchor is fixed or in a fixed container.

So you say, for q-scroll-area's the up display is typically the expected behavior. (I mean, using a q-scroll-area within a q-drawer puts q-scroll-area's contents into a fixed container.)

[pdanpdan]

You can try beta.3 - it should improve on the initial positioning.

If the content of the dialog takes some time to be rendered (and on the initial render it is smaller than the final one) then the dialog might end up in the requested position and with scroll bars - you can mitigate this with a min-width/height.

About the positioning when the anchor is inside a scrollable element (other than the document.scrollingElement) - it is too complex to compute, I'm not sure it's worth, but I'll think about it more.

[BarnabasSzabolcs]

Yes, I think you're right. Q-menu is meant to be a toolbar menu anyways and I'm very thankful for you picking up and fixing this issue.

I have checked the context menus on iPhone mobile and if the menu is opened from the center
and it cannot align itself either left or right, it will break the layout by expanding leftwards.
I don't think that this a huge issue for most users though.

[pdanpdan]

@BarnabasSzabolcs Sorry, I was busy lately. What do you mean by

I have checked the context menus on iPhone mobile and if the menu is opened from the center
and it cannot align itself either left or right, it will break the layout by expanding leftwards

Btw, you can use "quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.15.5-beta.17" :)