Hello all,
I am unable to share details about the actual use case where I had this issue, but was able to replicate it in a sample oml.
I have a table with a column that has a popover menu where I show additional information about the corresponding row when the user clicks it. In the screen with the table, I added a (.table) class to expand the default class and format the text inside of the table.
While testing, I noticed that, sometimes, the class is applied to the popover menu text elements and sometimes it is not.
From what i could tell, it is applied when I first open the application and navigate to the screen with the table (not always). If i reload the screen with the table or open it directly, the class is not applied.
My sample oml also uses a tabs navigation widget since I noticed the issue while using and thought it might be related, but the issue still persists even without it.
I would like to ask what should be the intended behaviour for the popover menu and how can I make it consistent?
Thank you in advance for all the help.
(Screen after opening the application)
(Screen after reloading)
Hi @Carlos Mendes ,
Eduardo found the root cause, what you can do is to not depend on the popover inheriting styles from the table. Style it explicitly.
.popover-bottom{
font-weight: 600;
text-align: center;
}
Thank you for your answer.
Hello Carlos.
May I ask why are you using a Popover Menu?
I think to display extra information in this way, you probably would be better using the Tooltip widget. The Tooltip can also requires a click to open, like you need.
It is also much simpler, as the Popupover Menu is supposed to have options for the user to click (like a context menu), so I imagine the CSS is a bit more complex on it.
Cheers!
Hello,
I assumed both widgets worked in a similar way and since the popover menu default format was a better fit for my need than the tooltip, I went with it.
I also checked the documentation and since it says the popover can be used to show contextual information (https://success.outsystems.com/documentation/11/reference/outsystems_language/interfaces/designing_screens/popover_menu/), i did not place much thought into one over the other.
Fair :)
I know WHAT is happening, but not WHY it is happening this way.
Sometimes, when you navigate to the page or when you refresh it, the popupover is being generated INSIDE the table, sometimes it is being generated OUTSIDE the table.
Whenever is being generated INSIDE the table, it receives the Table CSS.
This shouldn't happen, and I can't find anything in your application that justifies this difference in the generated HTML.
I recommend you to open a ticket with support, as this MAY be a bug.
Please, if you can, try using the Tooltip instead and see if the behaviour is the same or if it fixes the problem.
Thank you for explaining what the problem is.
I added a third column in my table where I show the same info, but using the tooltip instead.
From the brief testing i did, it seems the tooltip is consistent (always has the text format changes made by the (.table) class), whether the popover menu has it or not.