Floating Block Popup Menu does not adapt to screen size
The Popup Menu does not adapt to the screen size and is cut off on smaller PC Screens.
I would expect the menu to expand wider to fit all the icons.
The following two screenshots display the smaller and larger screen sizes:
-
Also, changing the setting to any other style does not affect the layout.
-
- · Romulus
- ·
I think it’s a great idea to adapt the menus for different monitor sizes, ensuring that they become responsive on smaller screens so that all icons are visible across all applications. This can be achieved by modifying the CSS, and likely some JavaScript and HTML as well. I will review the code to determine how this can be implemented effectively.
-
- · Romulus
-
·
In reply to Romulus
- ·
There is a temporary solution, hide some applications from that menu that are not important until you solve the problem. This way the menu becomes smaller
-
- · Romulus
- ·
You can also hide certain menus for users who do not have permissions for specific applications while displaying others for those who do. This allows you to customize the user experience based on their permissions, ensuring that they see a satisfactory number of icons.
The best approach is to modify the CSS so that on smaller screens, the layout becomes fully responsive. Additionally, applications can be designed to scroll infinitely, either vertically or horizontally, similar to the experience on a mobile phone screen. This way, users can continue scrolling until they reach the bottom or the end of the available options, even if all items do not fit on the screen.
I am particularly interested in this menu because I want to enhance accessibility for users also in standard mode, not only in application mode. If I succeed in making this change, I will be sure to share the solution . But at the moment I have other priorities.
-
I'll go for the CSS modification because I want the users to see all the available apps. When they click on an item they are not authorized to use under their current subscription level, they might respond positively when they get the invitation to upgrade.
-
I'm calling on developers to write an App that will sort out all the CSS issues.
-
Implementing this change is quite feasible. Can be create a new media query to add one or two additional columns for specific monitor sizes, ensuring that the menu width is set to 100% for full responsiveness. Additionally, JavaScript can automatically calculate the monitor width, allowing for dynamic adjustment of the number of columns displayed based on the user’s screen size.
If there are still more applications than can fit in the available space, the layout should allow for vertical or horizontal scrolling. This will enhance the overall user experience by ensuring that the layout is fully responsive and adapts seamlessly to different devices. By determining the optimal number of columns to display and enabling scrolling, we can effectively optimize the user interface for varying screens, providing a better experience for all users.