Hello everyone,
I've been grappling with a CSS challenge lately and could use some guidance regarding the burger menu and its interaction with the popover widget.
To simplify the issue, I've isolated the problem in a distinct ODC app, which I've attached for reference.
The desired display for each quote record is as follows:
However, the current output appears like this for most records:
Here's the CSS I'm currently using:
.burgermenu-quotes .popover-bottom { border: 1px solid #c3c3c3; transform: translate(-200px, -25%) !important;}
Could anyone provide some insight or direction on how to resolve this issue? Any help would be greatly appreciated!
Hi @André Smit
That has to do with the way the Tabs are built and is a technological thing that won't be fully solved (even if a support ticket is opened) since the Popover Menu widget (that is not an OS UI component but a platform core widget). The alternative I would suggest since it will be a perfect fit for this use case is for you to replace this with the Overflow Menu component that is part of the OS UI offer.
Here's an example of your use case using the Overflow Menu:
Cheers,GM
hi André Smit,
i am unable to open your OML.
try to use css for the popover
{
overflow:hidden;
height: acording to your popver height
overflow-x: auto;
overflow-y: auto;
}
hope this will help
Thanks
Prince
Hi @Prince Aadil Khan Panwar
Thank you for your prompt response.
I've attempted the steps you suggested, but unfortunately, it hasn't yielded the desired outcome.
The attached file is only compatible with ODC, sadly. For the sake of ease and compatibility with other environments—considering that ODC lacks a personal environment—I'll be converting it to O11 in my setup for peace of mind. I'll upload the converted file later today, which should facilitate accessibility for everyone involved.
Also, I wanted to share the link to the application for your reference:CSSBurgerMenu App
It seems there's a variance in styling between O11 and ODC.
Attached is the OML file related to this for your evaluation.
Hello André Smit,
Try to use this CSS:
/* Adjust the position of the popover */
.burgermenu-quotes .popover-bottom {
position: absolute;
top: 100%;
left: 0;
transform: translateX(-50%);
border: 1px solid #c3c3c3;
display: none;
/* Show the popover when the burger menu is clicked */
.burgermenu-quotes.active .popover-bottom {
display: block;
Hope this resolves your issue !!
Regards
Reemali.
Hi @André Smit ,
the cause of the problem is related to the tabs widget that your tables are in, and the cutoff is determined by the hight of the tabs, which, I think is calculated by the widget based on the content.
It is cut off exactly where the tabs widget ends, and if you use developer tools to change the height from auto into another larger value, your menu shows completely.
this is before changing the dom
this is after changing the dom
This feels to me like a bug in ODC Outsystems UI, where all widgets should play together well.
Dorine
@André Smit ,
I attached the outsystems ui (odc) component to your post, this helps draw the attention of the teams at Outsystems who are developing this.
@Reemali patil, thank you for your swift response. I attempted the CSS solution you provided, but unfortunately, clicking on the burger menu doesn't trigger any action.
Hello @Dorine Boudry,
When initiating this thread, I had a hunch that the Tab widget might be linked to the challenges I'm encountering. Your clarification aligns perfectly with my suspicion. I'm grateful for your editing to enhance the post's visibility.
I plan to submit a support ticket to OutSystems to address this issue. I'll update this thread once a solution is in place. Appreciate your support.