ColumnPanel with fixed height and vertical scrolling

I’m trying to create a column panel with a fixed width, with a repeating panel and a button in it, where the button is fixed to it at the bottom of the column panel.

I’m trying to build something like this:

I’ve already fixed the button at the bottom, but I’m unable to make the repeating panel alone a part of the vertical scroll; currently everything inside the column panel is in the vertical scroll.

Is it somehow possible to subject only the repeating panel to the vertical scroller? I don’t want the column panel to entirely scroll, just the repeating panel.

You can try to solve it in two ways:

  1. Inside column panel put on top another column panel for you repeating panel and button below that panel. Apply CSS Role on that new panel with repeating panel that has CSS overflow-y and set it’s height with view height units (for e.g. height: 80vh) to push the button to the bottom.

  2. Or you can try to work with CSS:
    You could try to pass following CSS styles to the button:
    But your button has to be wider than the panel to cover it! If not you will be able to see the rows dissapering below it.

  position: sticky;/*by setting it it will get stick and it hoovers over the scrolled objects*/
  bottom: 0; /* it will stick on the lowest possible position in containing container, adjust with numbers to move little to the top, if it's too low */
  z-index: 1;/*forces to be always over the object with lower number*/

and to the panel z with lower number

z-index: 0; /* higher number will be always on top */

and to the column panel: overflow and fixed height

2 Likes

Thank you so much for your response!

Method 1 did work, and fulfilled my purpose. Thank you!

1 Like