Popover menu widget
Question

When clicking the popover menu, the menu will be prompted but overlapped the existing selection. Is it possible to shift the popup menu down?

popovermenu.oml

Jessica Lee wrote:

When clicking the popover menu, the menu will be prompted but overlapped the existing selection. Is it possible to shift the popup menu down?


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?

mvp_badge
MVP

Hi Jessica,

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;
}



mvp_badge
MVP

Jessica Lee wrote:

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;

}


Hi Jessica,

To define a CSS 2D translate transform you have to define the CSS as mentioned below:

Syntax

transform:translate(x,y);


CSS Code Snippet

.custom-popover .popover-bottom {
    transform: translate(10%, 28%) !important;
}


Check this:  Sample Screen


Hope this helps you!


Regards,

Benjith Sam

mvp_badge
MVP

Hi Jessica,

I am hoping this is resolved by 

.custom-popover .popover-bottom {
    transform: translateX(-50%) translateY(40%) !important;
}

I tried that on your oml and is working fine the value of x and y however are little different.


Regards,

-PJ-

Thank Benjith. I change it to be pixels and then fix the problem.




mvp_badge
MVP

Jessica Lee wrote:

Thank Benjith. I change it to be pixels and then fix the problem.


Glad to help you!


Regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.