I attempting to make a more custom drop down that the typical dropdown within the perspective components. The goal is to click the grouping, and have the options menu appear below (overlapping the existing content). See what I have working so far below:
My strategy has been to create a popup with another view that appears on click and goes away storing the selection in a session property. This is working well, but I am struggling to do a couple of things (I know this is more than 1 question, but I figured I’d summarize them all together).
Popup Size
Is there a way to bind popup size with general screen size? I know the popup can scale with screen size using a script to launch (Perspective popup view size). I would like to popup a discrete size depending on screen size.
For example on large screens, set popup width to 500px, and on mobile screens set popup width to 300px. (The popup view is already defined as a breakpoint view). I do not want it to scale, but discretely select the size based on over screen.
Popup or Link
On large desktop applications, I have some views that work great as popups over the original content on selection, but on mobile, it can be better to make it a whole screen selection. One way to solve this is to know the screen size and make the button open a new link when small or popup when large. How do you access the screen size in order to make this happen? Or is there a better way?
Popup Location
I am aware that a popup can be absolute or relative (to click) opened. Is there a way to relatively open it to another component? I’d like it to always open below the dropdown selector rather than where it was clicked within the selector.
Other Options
Dropdown, horizontal menus are capable of creating hovering boxes over content but don’t seem customizable to have the custom menu’s I’d like. Is there a way