98
Views
13
Comments
Solved
About Vertical Scrollbar except table header
Question
Application Type
Reactive

Hi, all

How to show the Scrollbar except Table Header.


I would appreciate it if you could teach me.


Regards,

Sammy


2025-04-17 05-42-16
Ajit Kurane
Solution

Hi,

I have add new css in the style sheet and did some changes in the OML. Please find the changes in attached new oml file.

Demo link: UpdatedTableScrollbar


Please add class like this as well while developing,


Thanks,

Ajit Kurane.


UpdatedTableRow.oml
2025-02-21 07-07-34
Rishabh Tailor

Hi, @Sammy A ,

You have to give custom CSS to the table head, so that it sticks on the top and have to define a specific height for the table container so the the scroll is visible.

Check "Home2" inside Banking module in the attached OAP.

Banking.oap
UserImage.jpg
Masugorou A

Hi @rishabh tailor

Thank you for your kindness.

However I cannot open your module.

From manage dependency, I refreshd the following module but, many error occured.

How should I check?

Regards,

Sammy


2025-02-21 07-07-34
Rishabh Tailor

Hi, @Sammy A ,

Sorry, it was my mistake; I uploaded the OML instead of the OAP.

Please check the OAP attached in this reply.

Edit: I also updated the original reply.


Also, if you want to stick a column, then you can refer my answer for this question: 

https://www.outsystems.com/forums/discussion/96666/help-how-to-create-a-dynamic-scrollable-table/#Post417623 

Banking.oap
UserImage.jpg
Masugorou A


Thank you for teaching me so kindly.

Regards,

Sammy

2025-04-17 05-42-16
Ajit Kurane

Hi Sammy,

Please find the attached oml for the same.

Demo Link:- TableHeader



I have add sticky-header class to table header,

You can add scroll class to the container,


Thanks,

Ajit Kurane.

Header.oml
UserImage.jpg
Masugorou A

Hi @Ajit Kurane
 
Thank you for your kindness.

Is it possible to add a scroll bar from the record section?

Regards,

Sammy

2025-04-17 05-42-16
Ajit Kurane

Record section means where exactly are you expecting? Can you please share one more image with detailed requirement ?

UserImage.jpg
Masugorou A


Sorry for the poor explanation. 
I want to display a scroll bar below the table header.


Regards,

Sammy

2025-04-17 05-42-16
Ajit Kurane
Solution

Hi,

I have add new css in the style sheet and did some changes in the OML. Please find the changes in attached new oml file.

Demo link: UpdatedTableScrollbar


Please add class like this as well while developing,


Thanks,

Ajit Kurane.


UpdatedTableRow.oml
UserImage.jpg
Masugorou A


Thank you for teaching me thoroughly. 

Regards,

Sammy

UserImage.jpg
Masugorou A


@Ajit Kurane

Thank you very much for your kind instructions the other day.

Thanks to you I was able to answer my question.

However, it doesn't work in a different environment (the left table)  though I did the same implemantation.

The icon of the table widget on the left is different, but can I use the same CSS?

If you know, can I have some help please? 


2024-06-30 04-29-36
Priya Jhode

Hello, @Sammy A 

Try this CSS

.table-container {

  max-height: 400px; /* Adjust this height as needed */

  overflow-y: auto;

}


.fixed-header-table {

  width: 100%;

  border-collapse: collapse;

}


.fixed-header-table thead th {

  position: sticky;

  top: 0;

  background-color: #f1f1f1; /* Background color for the header */

  z-index: 1;

}


.fixed-header-table th, .fixed-header-table td {

  padding: 8px 16px;

  text-align: left;

  border: 1px solid #ddd; /* Optional border */

}

Hope, it's helps you

Best Regards

UserImage.jpg
Masugorou A

Hi @Priya Jhode

Thank you very much for your kind instruction.

Regards,

Sammy

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