What does "stopped working" mean, exactly? Are you getting scrollbars at all?

What have you tried to solve the issue?

Can you share a small OML with a repro of the issue?

Did you try setting up the property?

overflow-x

Hi,

I've always used the common solution of wrapping the table in a container with the attribute overflow-x: auto. After switching from SilkUI to Outsystems UI Web (I mean: nothing has changed except the base theme (Side Menu instead of Dublin) and the base widgets library (Outsystems UI Web instead of Silk UI)) this solution works no longer. That is what I call "stopped working": working - the change of the environment - not working.

No, I get no scrollbars. A wide table ends beyond the right edge of the screen and causes, of course, that all right-sided elements (like table navigation) land also outside the screen.

Look at the attached print-screen - Chrome + its developer tool. You can easily see a table that is obviously too wide and that it is wrapped in a container with overflow-x: auto. No, I've not tried to solve it another way 'cause I've no idea what to try.

I'm about sending a ticket to OS.

Regards

Tomasz

Hi,

On the div with the class TableRecords_Wrapper add this style:position: relative; and on the the overflow div the style should be this : 

overflow-x: scroll;
    white-space: nowrap;
    position: absolute;
    width: 100%;

Hope this helps,

Regards,

Marcelo

Marcelo,

It works well but only when there is nothing else on the screen except this table. This "position: absolute" attribute causes that the table now occupies no space and all subsequent elements, that normally would be below the table (e.g. table navigation), now are under the table.

So I'm sorry but it doesn't work.

Regards

Tomasz

HI all,

I've got the answer from the OS team:

As a possible workaround you can apply the following css into your theme or screen:

.layout { flex: none; display: block; }
.TableRecords.OSFillParent  { display: block; overflow-x: auto; }

And it seems to work fine. And - as a bonus - the last rule makes unneccessary special wrapping the tables.

Regards

Tomasz

Oops,

This solution was not so good - wide table looked good but narrow looked poor (they took ony a part of the available space).

The improvement (also suggested by OS) is:

• leave the rule for "layout": .layout { flex: none; display: block; }
• remove the rule for .TableRecords
• use the old, good container with overflow-x: auto to wrap wide tables

Regards

Tomasz