Repeating Row Scrollbar - flex height and scroll only for repeating rows

Anvil Q&A
1

What I’m trying to do:
In my form I don’t want the user to scroll the whole form down to get to the bottom of the Repeating Panel. I would like to have the scroll bar forced in my repeating panel to scroll it independently from the rest of the form.
The header and footer of the data grid should stay in place and only the repeating panel should get a scroll bar. The rest of the Data Grid is frozen.

What I’ve tried and what’s not working:
I’ve edited the data grid CSS template to show the y-scrollbar, but it reach up to the top of data grid and scrolls not only the repeating panel but too the header row.

  1. How can I make it to cover only repeating panel rows not the header?
  2. How to set the max height based on the screen size of the device? I don’t want to set it to some fix value like 400 px. If the device screen is 4k it will be too smal.
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel {
  border-radius: 24px;
  border: 1px solid %color:Surface Variant%;
  overflow-y: scroll;
  max-height: 400px;
}

Clone link:

2 
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel .repeating-panel {
  border-radius: 24px;
  border: 1px solid %color:Surface Variant%;
  overflow-y: auto;
  max-height: 400px;
}

It works but I have no experience with JQuery and what I found untill now would be using Jquery to get the height of the View Port in Browser and then setting the height corresponding to it.

3

This is usually handled via paging instead of scrolling. See

4

Belive me it’s crucial for my intended use. :smiley:.
I have small drop down in the footer with options up to 50 rows per page. Use can decide how many he want to see.

Found some JQuery script that checks the max height and set it automaticly to the CSS. Need to look into it