[OutSystems UI Web] Default Responsive Tablerecords

Forge Component
Published on 14 Feb (10 days ago) by OutSystems R&D
45 votes
Published on 14 Feb (10 days ago) by OutSystems R&D


I'm developing a responsive application and i'm using a default responsive tablerecords, not the UI Widget.

When i'm in the tablet, the default script run and works good, but if i have a ballon inside table and i click to open it the script runs again and duplicate "table header". So if i click in the ballon the table starts growing.

This happens i think because the ajax refresh is always running the script and duplicate table header.

If i have other ajax in the page not in the table this happens.

This is causing constraints in my application.

Starting Point.

After click on icon to open a ballon.

after click out of ballon to close it and click again.


We had the same problem and created a support case for it.

It's a bug and OutSystems will fix it in a new version.



Hi Rodolfo,

try to clear the variable script that you are running at the begining of your preparation or server action, this is because the "end" in an action preserve the variables (do not refresh the page), this means do not clean the variables that you are using after the rendering, so if you use a ajax refresh (in all the page you need to clean the script), it is going to re run the action causing the problem that you are having.

hope this give you a little way to solve your issue.


Hi Rodolfo,

As my colleague Johan mentioned we discovered this issue also adn reported it to OutSystems support. 

It occurs whenever an AJAX refresh is performed on the page, even though the TableRecords is not a part of the refreshed content.

I created a simple workaround in CSS that disables all labels that are not the first labels. You might have to tweak this for your situation.

SyntaxEditor Code Snippet

/* WORKAROUND for TableRecords displaying multiple labels in tablet / phone mode */
.tablet.portrait .TableRecords:not(.no-responsive) .TableRecords_OddLine .TableRecords_Label:not(:first-child), 
.phone .TableRecords:not(.no-responsive) .TableRecords_OddLine .TableRecords_Label:not(:first-child),
.tablet.portrait .TableRecords:not(.no-responsive) .TableRecords_EvenLine .TableRecords_Label:not(:first-child), 
.phone .TableRecords:not(.no-responsive) .TableRecords_EvenLine .TableRecords_Label:not(:first-child) {
    display: none !important;

Kind regards,

Arthur Haine