apostrophe
apostrophe copied to clipboard
apostrophecms
Admin modal area options overflowing creating vertical scroll
** Apostrophe version: 2.220.7 **
To Reproduce
Step by step instructions to reproduce the behavior:
- In any widget configuration menu (admin interface) add an apos area with multiple widgets. (ability to select between 3 widgets to add to the area)
- Click on the + icon to add a widget to the area.
- The dropdown, from which you select a widget, will get cut off at the bottom.
- You have to scroll to see the rest of the options.
Expected behavior
The dropdown, to select a widget, shouldn't get cut off and you shouldn't have to scroll to see the options.
Describe the bug
When in an admin popup, if there is an apos area with multiple widgets listed as options, the dropdown, to select a widget, gets cut off and the area becomes scrollable. To see all the options from the dropdown you have to scroll.
Details
Version of Node.js: Node v12.18.3
Server Operating System: Windows 10, Windows 11, CentOS
Additional context:
Happens in all major browsers
** Possible Fix **
From poking around I've found a fairly easy fix for this (not sure how it affects the whole interface since I didn't test everything).
In modal-tabs.less on line 45 there is style applied as .apos-schema-group and the last line is overflow: auto (line 50) if I were to disable that style then the issue fixes itself.
Screenshots
Hi Arthur, I think you might get a swifter response if you submit a PR with this, since you have a solution in mind.
It's been a while since I looked at this, but I would also look at ensuring the body region is full height. As I recall with only one field in it the body area is only as tall as that one field (plus padding).
It's been a while since I looked at this, but I would also look at ensuring the body region is full height. As I recall with only one field in it the body area is only as tall as that one field (plus padding).
If you add enough items, to the area, so that they fill the whole screen and the div becomes scrollable, when you want to add another item the dropdown is cut off again and another scrollbar appears. So the div that contains the area gets a scroll (because of the dropdown) and the larger div also gets a scroll (because of the size of the area).
Attached the image above of what happens.
Edit: My initial solution with removing overflow: auto; would also fix this issue. But there wouldn't be any space left at the bottom of the modal. I think the issue is mostly related to how position absolute items work in overflowing elements. I'll keep poking around at it when I got the time see if I can come up with something without having to rewrite a lot of code.
That's absolutely correct. I think both solutions would probably be a good idea. We'd welcome a PR on this. The primary thing to look out for is a change in the UI when scrolling is not needed.
@stuartromanek Do you have any other thoughts or reservations regarding introducing a scroll to area menus with hidden items?
On second thought, I'm a little confused here. @arthurnagyy is the problem that you don't have access to the menu items or simply that you have to scroll to see them? Are you expecting it to open the menu upwards instead of down so more is visible? What exactly are you expecting for it to do?
Having to scroll to see the items is an inconvenience, but it would be a very low priority bug if we consider it a bug at all (an area for improvement, instead). If you don't have access to the menu items then that would definitely be a bug.
It can be selected, but the scroll is annoying. Client pointed it out and doesn't really like it. When we tested it we noticed the double scroll happening which is more than annoying because sometimes you might be scrolling but it isn't moving since the div behind it is scrolling instead.
I'll try to find a solution and will submit a PR.
Hello @abea
Is this issue is still open or the PR on this by @arthurnagyy has fixed it?
Looking to contribute.
Hi @sourabpramanik - I think the PR fixed it. Apostrophe version 2.x.x isn't going to be updated any longer. I recommend looking at the 3.x.x version.
