20
Views
16
Comments
Fixed table record widget on web page Scroll
Application Type
Traditional Web
Service Studio Version
11.8.6 (Build 28199)

Hi,

I wanted to fixed header of table record widget on the scroll of the webpage.

I follow this https://success.outsystems.com/Documentation/How-to_Guides/Front-End/How_to_scroll_records_in_a_table_with_a_fixed_header

But that didn't work out for me. Is there any other way we can achieve this then please attached the .oml here...

Thanks in advance.  


Rank: #295

Hi Rohan,

You need enclose your table inside a container and add following css in its style properties.

max-height: 260px; (you can change height value as per your need)

overflow-y: scroll;

and then add following css in your screen.

.TableRecords .TableRecords_Header {

    position: sticky;

    top: 0px;

}


Hope this works, Thanks :)

TesteOrdenacao.oml

Do you really need it in IE11?

Hi, Rohan.

I added this javascript on screen to simulate the sticky. You still need to adjust the width of the columns, but if the functionality of pinning the header at the top of the screen works. I hope it helps to at least think of a better solution.

I am attaching the updated .oml to be able to verify

https://essr.outsystemscloud.com/TesteOrdenacao/Entry1.aspx?_ts=637417416218598838

Regards,

Eduardo

TesteOrdenacao.oml