Popover Menu on top of list

Hi, I want to ask how can I put the popover menu wideget on top of the list widget. Currently, it resides inside the list.

list.PNG

Hello Sharifah,

This link has some css tips that you could leverage. Hope it helps

Regards,

AJ

I tried it but it still resides inside the list. How can I pop over the list instead of inside the list?

For a popup with say just 1 or 2 items I was able to get it to display fully within the boundaries of the default list-item height, with the following css, however, for 3 or more items the popover menu widget 'cuts off' at the list-item's boundary:

.custom-popover .popover-bottom {
    transform: translate(20px, -25%) !important;
}

Hopefully the CSS guru's in the community have a suggestion/ resolution for popup menu with 3 or more items

mvp_badge
MVP

Hi Sharifah,

I do have a solution to suggest for the mentioned use case. See this sample screen ListPopoverMenuDemo

Follow the Steps:

1) Add  the custom style class name to the List widget i.e. custom-list-style with a space

2) Add the custom style class name to the Popover widget i.e. custom-popover with a space 

3) Define the below-mentioned css class definition to the respective screen StyleSheet section

CSS Snippet:

.custom-popover .popover-bottom{
    top: 0px;
    left: 90px;
    width: max-content;
    padding: 0px;
}

.custom-list-style .list-item {
    overflow: visible;
}

.popover-bottom div:hover {
    cursor: pointer;
    background: red;
    color: #fff;
}


.popover-bottom div {
    padding: 5px;
    border: 1px dotted gray;
    margin: 5px;
    border-radius: 5px;
}

.custom-list-style.list.list-group {
    overflow: visible;
    padding-bottom: 250px; 
    margin-bottom: -250px;
}


I hope this hepls you!


Kind regards,

Benjith Sam

Benjith delivers! Works like a charm on my end.

Hello all,

I agree with the approach from Benjith Sam, but I think just a little improve regarding BEM methodology.

Instead of using the word "custom" on the class name, use from example something more descriptive, for example: "popover--visible-on-rows" and "list--inside-popover-visible".

Hope it helps.

Best Regards,

Nuno R

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