Large List in Alert/Confirm with Scroll

Anvil Q&A
1

I am making a custom component with a repeating panel and a couple of buttons below to be shown in an alert as an item selector popup. When the list gets so long that the bottom of the alert popup goes below the bottom of the browser window, a scroll bar appears on the side of the browser window which allows me to scroll up and down the alert window.

I feel it would look much better, though, if the alert window was a set height and the scroll bar only applied to the repeating panel, thus allowing me to scroll up and down the long list of items while the buttons below are always visible in the browser window. Any thoughts on how I might achieve this?

2

Here’s some CSS that turns a panel into a scrolling element that always fits inside an alert:

.anvil-role-scroll-in-alert {
  overflow-y: auto;
  max-height: 80vh;
  max-height: calc(100vh - 200px);
}

Here’s some code to test it, using a LinearPanel as an example:

    lp = LinearPanel()
    for i in range(400):
      lp.add_component(Label(text="Line %d" % i))
      
    lp.role = 'scroll-in-alert'
    alert(lp)

And here’s what that looks like:

image
image.png423×1186 20.6 KB

1 Like
3

Awesome! Thanks, @meredydd. Exactly what I was after. :slight_smile: