Table header should be fixed while scrolling the table records

Back to Forums

Ajit Kurane

Solved

Question

Reactive

Front-end

Application Type

Reactive

Hi team,

I want to make table header as fixed while scrolling the records. I have applied one css class to the container but it does not work as I am expecting. Can anyone check my oml and let me know what needs to be change in that class.

Before scrolling,

After scrolling,

Thanks in advance.

Dynamic_Scroll_Demo.oml

27 May 2023

Benjith Sam

MVP

Solution

Hi Ajit,

To make it work, follow the below mentioned changes in your solution:

CSS Snippet:

.tbl-cntr {
    height: 400px;
    overflow: auto;
}

.sticky-header {
    position: sticky;
    top: 0px;
}

1) Add "tbl-cntr" style class in the wrapper container

2) Add "sticky-header" style class in the table Style Header

Demo Screen: TableFixedHeaderTask

Refer to the attached oml.

Kind regards,

Benjith Sam

See solution in context

Dynamic_Scroll_Demo.oml

27 May 2023

4 replies

Last reply 29 May 2023

Show thread

Hide thread

Ajit Kurane

Thanks.

I will try above changes.

28 May 2023

Ajit Kurane

Hi Benjith,

Thanks for the solution.

It is working fine for header but when I put dropdown in status column then its overlapping on header while scroll down.

on browser,

Is there any alternative way to make it proper ?

Thanks.

Dynamic_Scroll_Demo.oml

28 May 2023

Ajit Kurane

Solution

Replying to Ajit Kurane's comment on 28 May 2023 13:57:03

Just made the small changes in CSS to avoid the overlapping of dropdown.

.sticky-header {

position: sticky;

top: 0px;

z-index: 5;

}

Thanks. It has been resolved.

28 May 2023

Benjith Sam

MVP

Replying to Ajit Kurane's comment on 28 May 2023 19:10:32

You're welcome. Glad to know you got it solved :)

Thank you for sharing your final solution.

Kind regards,

Benjith Sam

29 May 2023

Ajit Kurane

Solution

Replying to Ajit Kurane's comment on 28 May 2023 13:57:03

Just made the small changes in CSS to avoid the overlapping of dropdown.

.sticky-header {

position: sticky;

top: 0px;

z-index: 5;

}

Thanks. It has been resolved.

See solution in context

28 May 2023

Benjith Sam

MVP

Solution

Hi Ajit,

To make it work, follow the below mentioned changes in your solution:

CSS Snippet:

.tbl-cntr {
    height: 400px;
    overflow: auto;
}

.sticky-header {
    position: sticky;
    top: 0px;
}

1) Add "tbl-cntr" style class in the wrapper container

2) Add "sticky-header" style class in the table Style Header

Demo Screen: TableFixedHeaderTask

Refer to the attached oml.

Kind regards,

Benjith Sam

Dynamic_Scroll_Demo.oml

27 May 2023

4 replies

Last reply 29 May 2023

Show thread

Hide thread

Ajit Kurane

Thanks.

I will try above changes.

28 May 2023

Ajit Kurane

Hi Benjith,

Thanks for the solution.

It is working fine for header but when I put dropdown in status column then its overlapping on header while scroll down.

on browser,

Is there any alternative way to make it proper ?

Thanks.

Dynamic_Scroll_Demo.oml

28 May 2023

Ajit Kurane

Solution

Replying to Ajit Kurane's comment on 28 May 2023 13:57:03

Just made the small changes in CSS to avoid the overlapping of dropdown.

.sticky-header {

position: sticky;

top: 0px;

z-index: 5;

}

Thanks. It has been resolved.

28 May 2023

Benjith Sam

MVP

Replying to Ajit Kurane's comment on 28 May 2023 19:10:32

You're welcome. Glad to know you got it solved :)

Thank you for sharing your final solution.

Kind regards,

Benjith Sam

29 May 2023

Newton Monroe

https://www.outsystems.com/forge/component-overview/10056/scrolltable

30 May 2023

1 reply

30 May 2023

Show thread

Hide thread

Ajit Kurane

Thanks

30 May 2023

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines