Vertical scroll bar for the sidebar is not appearing

Anvil Q&A
1

Hi all

What I’m trying to do:

Have a separate scroll bar for the sidebar in Material Design, so the main app stays in one place as the user browses the nav.

image
image1920×969 29.9 KB

What I’ve tried and what’s not working:

Other users have asked about this scroll bar in a couple of forum posts, such as:

However, the CSS in my themes file which controls the sidebar seems to already have the ‘overflow-y: auto;’ line which was the solution in previous cases.

# This is the CSS currently in the themes file

.nav-holder .left-nav, .left-nav-placeholder {
  display: flex;
  flex-direction: column;
  background: white;
  border-right: 1px solid #e0e0e0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.87);
  overflow-x: hidden;
  overflow-y: auto; # This line is already present
}

I’ve seen scroll bars appear automatically on other apps I made, but it seems not to have kicked-in this time.

Does anyone know what might be stopping the scroll bar from appearing this time around, or have any ideas on how best to approach solving?

Thanks,

RIchard

2

Same problem for me. Anyone found a solution here?

3

The final suggestion on this stackoverflow question did the trick:

Adding the max-height property seems to solve it.

(I added both the max-height and overflow-y properties to the column panel I dropped inside the nav bar using a role).

5 Likes