How to prevent vertical scroll bars from showing in components

richard.lewis · July 30, 2021, 4:15pm

Hi guys

What I’m trying to do:

Get rid of the vertical scroll bars which are showing in my row panels within a repeating panel:

I used a CSS role to reduce the row panel’s padding by -10px top and bottom, and this caused the desired effect, but the unwanted scroll bars have also come in as a side effect.

Here’s what the row panel component looks like in the IDE:

What I’ve tried:

Reducing the layout spacing on all components
Playing with the css padding reduction

I would like to keep the row panel at a reduced height as it improves the readability of the data, but this is nullified if the scroll bars need to be there. Does anyone know an ‘off switch’ for the scroll bars or another workaround?

stucork · July 30, 2021, 11:38pm

Hi @richard.lewis, can you share a clone link that demonstrates this. It’ll be much easier then to suggest a solution.

richard.lewis · July 31, 2021, 9:02am

Hi @stucork, here’s a stripped-down clone:

https://anvil.works/build#clone:Z7GMCKLQGKLNY4H6=GCEWCUELOXTFEZTRI2LE4HBN

The scroll bars are indicated in the components in the IDE.

Thanks,
Richard

stucork · July 31, 2021, 9:12am

I think you need to put the keypress function back in

richard.lewis · July 31, 2021, 9:22am

Now added that function back in:

https://anvil.works/build#clone:S5HDRJQH2JHRA6UC=EOVH4IBUWU2K7KTX7LV57M2F

stucork · July 31, 2021, 9:54am

I’m not seeing the scroll bars in the clone. It might be browser/platform specific.
Do confirm that you see the problem is visible in the clone (the clone you shared doesn’t have any rows when I run the app so i added some in)…

without seeing the problem you might try adding:

.anvil-role-thin_row {
   overflow: hidden
}

richard.lewis · July 31, 2021, 10:00am

This worked beautifully. Thank you!