Skip to Content (Press Enter)
2025-01-09 14-56-57
IQ78
981Views
9Comments
Solved
Sticky TableRecord's Header Row
Question

HI there,

Can we make the header row of a table record to always shown as we scroll the table record?

Thank you very much

regards

0
0
15 Feb 2019
Copy Link
2023-07-28 17-00-32
Marco Arede
 
MVP
2020-06-08 02-42-28
Wasabi

Hi Marco,

How to do it in Outsystems?

Tq7

0
0
15 Feb 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

Behavioral wrote:

Hi Marco,

How to do it in Outsystems?

Tq7

Hi,

 Please go through with the below link.

https://success.outsystems.com/Documentation/Development_FAQs/How_to_scroll_records_in_a_table_with_a_fixed_header

Regards,

Pankaj Pant

0
0
15 Feb 2019
Copy Link
2025-01-09 14-56-57
IQ78

Pankaj pant wrote:

Behavioral wrote:

Hi Marco,

How to do it in Outsystems?

Tq7

Hi,

 Please go through with the below link.

https://success.outsystems.com/Documentation/Development_FAQs/How_to_scroll_records_in_a_table_with_a_fixed_header

Regards,

Pankaj Pant

Hi Pank

It did not work.

When i scroll the browser vertical scroll bar, the header follows going up.

I want the header stays visible.

regards and thank you


0
0
18 Feb 2019
Copy Link
2022-06-06 22-12-31
Tsuyoshi Kawarasaki

While I understand the solotion depends on the situations and the target web browsers, the following CSS code just worked for me. Let me leave a comment here for the later reference.

.TableRecords .TableRecords_Header {
    position: sticky; top: 0;
}

Other ideas can be found in the following link.

https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body

2
0
10 Feb 2021
Copy Link
2017-06-27 13-05-39
José Queirós

Fully agree, spent ages in outsystems pages trying to find a well-supported way to do this. Like you say all you need is some good CSS classes. The key attribute is the position: sticky, for documentation on that CSS property check this link: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning 

If you want to apply the sticky header to all your table records, just apply the following: 

.TableRecords .TableRecords_Header{
    position: sticky;
    top: var(--header-size);  
    z-index: 5;
}

  

3
0
15 Jul 2021
Copy Link
UserImage.jpg
Yannick Mussche

Replying to José Queirós' comment on 15 Jul 2021 10:37:09

Hey José

This snippet itself doesn't seem to do anything (anymore). Could you update this css snippet? I also don't understand why you target the records to make the header sticky. 


Kind regards,

Yannick

0
0
13 Jan 2025
Copy Link
2014-10-21 20-15-17
Alberto Ferreira

Nice contribution! José Queirós.


0
0
16 Jul 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.