Skip to Content (Press Enter)
UserImage.jpg
Sharifah Syahirah
598Views
7Comments
Popover Menu on top of list
Question
OutSystems Widgets

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
0
0
23 Jul 2021
Copy Link
2021-11-18 18-03-41
AJ.

Hello Sharifah,

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

Regards,

AJ

0
0
23 Jul 2021
Copy Link
UserImage.jpg
Sharifah Syahirah

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

0
0
23 Jul 2021
Copy Link
2021-11-18 18-03-41
AJ.

Replying to Sharifah Syahirah's comment on 23 Jul 2021 02:33:43

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

0
0
23 Jul 2021
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
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

2
0
23 Jul 2021
Copy Link
2021-11-18 18-03-41
AJ.

Benjith delivers! Works like a charm on my end.

0
0
23 Jul 2021
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP
2021-09-30 18-38-59
Nuno Ricardo Rodrigues

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

0
0
26 Jul 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.