How to add a scroll to my modal

Design help General
1

Hi everyone!

I’ve added a modal to my Webflow project, but I’m having trouble making the content inside scrollable. Right now, some of the content gets cut off, and no vertical scrollbar appears.

Here’s my current structure:

  • filter-view: This is the full modal wrapper.
  • filter-container: This holds the scrollable content.
  • Div Block 20: This is a footer element inside the modal that should stay fixed or visible at the bottom - it shouldn’t scroll with the content.

I’ve tried setting overflow: auto on filter-container and limiting the height, but it’s still not working.

Read-only link:
:link: quotesbywomen Webflow preview

Would really appreciate any help on:

  • How to properly enable vertical scrolling only inside filter-container
  • How to keep Div Block 20 from being scrolled

Since I have a “Show more” button I’d also like my “inside-content” to be able to expand when displaying more check buttons.

Thanks in advance for any guidance!

2

Hi Anna.

On the filter-container, if that’s the immediate parent of your scrollable content, you can add a scrollbar there using the overflow-y: scroll style. You can add that as a custom style, you’ll see that section at the bottom of the styles panel for that element.

I use the same technique for scrollbars on SA5’s modals, and you can do some styling of the scrollbar as well.

3

Thanks for the tips! I tried to add this per the guide on the website. However, it still doesn’t work properly. The content in the footer of the modal doesn’t show at all, and it’s not possible to scroll at all in the modal. I can see some signs of a scroll bar though:

image
image163×842 8.26 KB

4

Ok, now I’ve managed the scroll to work. However, for some reason my button doesn’t show when I try to publish my page.

In editing mode in Webflow:

image
image382×122 8.19 KB

Published:

image
image568×155 7.15 KB

5

Button?

I can see you’ve shared a designer link but I have no idea where you’re asking for help.