When clicking the popover menu, the menu will be prompted but overlapped the existing selection. Is it possible to shift the popup menu down?
Jessica Lee wrote:
Hi Jessica,
If you want the popup menu to shift enclose them in separate containers.
I have tried to add the container to enclose the popdown menu and shift it down by CSS. Unfortunately, it doesn't work. Any idea?
Follow the below steps.
1) Add a Custom CSS class - e.g. custom-popover
2) Define the Screen Level CSS class defination as given below:
CSS Code Snippet
.custom-popover .popover-bottom { transform: translateY(20%) !important; }
Check this: Sample Screen
Hope this helps you!
Regards,
Benjith Sam
Thank Benjith.
Your suggestion improve the pop-down menu but it is still so weird even though they are applied same css. The menu is dropped down differently.
.custom-popover .popover-bottom { transform: translateX(-50%) translateY(40%) !important;}
.custom-popover .popover-bottom { transform: translateX(-50%) translateY(40%) !important;
}
To define a CSS 2D translate transform you have to define the CSS as mentioned below:
Syntax:
transform:translate(x,y);
.custom-popover .popover-bottom { transform: translate(10%, 28%) !important; }
I am hoping this is resolved by
I tried that on your oml and is working fine the value of x and y however are little different.
-PJ-
Thank Benjith. I change it to be pixels and then fix the problem.
Glad to help you!