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:

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?

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



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-

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

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




Jessica Lee wrote:

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


Glad to help you!


Regards,

Benjith Sam