Vertical scroll bar issue below 991px min-width

[apearce]

I have pages which use a datagrid which work as expected.

However when I reduce the browser window horizontally below 991px (min-width) or when viewed on mobile a vertical scrollbar is added to the page regardless of the vertical size of the content.

This scrollbar is in addition to the one added by the datgrid when the rows are greater than the vertical size of the browser window.

The result is either 1 vert scroll bar that does nothing, or 2 vert scroll bars, one that does nothing and another for the datagrid (if required).

Any idea what causes this and is there a way to avoid it?

[divyeshlakhotia]

Have you tried hidden overflow?

https://www.w3schools.com/css/css_overflow.asp

[apearce]

@divyeshlakhotia

Have you tried hidden overflow?

No, I hadn’t thanks for the pointer.

I can set up a role containing: overflow-y: hidden

However, I’m not sure how to apply it.

I obviously want to keep the scroll bar on the data grid. I just want to remove the extra one that does not appear to be required.

I just don’t know which element is triggering it and hence which to apply the new role to.

Does every element trigger a vertical scroll bar?

Why does it appear below min-width?

Any pointers would be appreciated. CSS and Anvil noob if you hadn’t guessed.

[divyeshlakhotia]

Anvil: Web Apps with Nothing but Python

See if this clears it up.

[divyeshlakhotia]

You can go to your theme.css and add this

.anvil-role-noscroll{

overflow-y: hidden;

}

Then you go to your roles and add a role called noscroll.

Then you can select this role for your component from the DropDown.

[apearce]

Hi divyeshlakhotia,

Thanks for the response.

I understand and use roles already.

What I don’t know in this instance is which of the elements on my page is causing the 2nd vertical scroll bar.

Many Anvil elements are containers themselves - will they all trigger a vertical scroll bar when min-width is reached?

If so, do I have to apply a overflow-y: hidden role to all of the elements on my page except the datagrid?

[divyeshlakhotia]

I can’t help with that without a clone link.

[apearce]

No problem, thank you for your help.

[apearce]

Ok - so I have fixed this for now, but I’m not sure what else I might have broken in the process!

No amount of role assigining worked the only way I could get rid of the second vertical scroll bar appearing (when reducing horizontal browser width below min-width) was to edit the standard CSS:

I changed this:

  overflow-x: visible ;
  overflow-y: visible ;
}

to this:

.anvil-container-overflow {
  overflow-x: hidden;
  overflow-y: hidden;
}

It makes sense that this is the culprit as the comment above this section mentions unwanted scrollbars

/* Allow overflows to show drop shadows in ColumnPanels
   This can create unwanted scrollbars; we compensate for this at the top level with .nav-holder .content {overflow-x: hidden;}
*/

I am sure this change will have broken something and there is another safer way to achieve my goal - I just can’t see it.

Maybe an Anvil team member can shed some light.

[apearce]

Scratch that!

It fixes my extra vertical scrollbar issue but wrecks the Nav Bar!

At least it might hep someone else narrow down the issue!

[divyeshlakhotia]

You need to have roles. Otherwise it will be applied everywhere.

[stucork]

hi @apearce, digging into specific css issues is challenging without a clone link. If you’re able to provide an example app that demonstrates the problem it becomes much easier for others to jump in with a solution. With a clone link, others will be able to see the problem first hand, make changes and then come up with suggestions.

[apearce]

Hi @stucork, I completely understand that clone apps are very helpful when diagnosing issues.

However it is not always practical to share an app (and particularly it’s data) publicly on an open forum.

I’m learning Python, CSS and Anvil at the same time so I am bound to come up against many unfamiliar concepts. How min-width and the default overflow css settings affect individual Anvil components would definitley be one of them. As I tried to explain to @divyeshlakhotia I understand the concept and use of roles. I just couldn’t figure out which component on the page was triggering the rogue scroll bar, so which component would I apply the role to?

I’m not looking for someone to fix this problem for me, unless it’s a bug of course. I’m just looking for a little direction to help me understand what might cause it. I’m happy to do the research if I know where to look.

What I suspect is that a combination of the containers I have used to get the formatting I wanted could be causing this.

Changing the global container overflow settings to hidden fixes the issue but obviously wrecks other parts of the display specifically the left nav.

I think an “overflow-y: hidden” role might fix the issue if I can figure out which component to apply it to.

Anyway, I have included some redacted screen shots to illustrate the issue more clearly:

All of these are on windows 10 desktop through a Chrome browser.

Fullscreen 20 items in list:

Reduced horizontal browser window (but larger than 991px) with 50 items (ie. too many to show vertically so a vertical scrollbar is automatically added as expected).

Reduced horizontal browser window below 991px with 20 items

Now you see we have the same functioning vertical scrollbar on the outside right. But also a non functioning (ie. no range to move) on the inside.

Below I’ve included the page structure if that helps.

Hopefully the above will demonstrate the issue better than words without having to produce a stripped out version of my app to clone.

One thing that might be obvious from the screen shots is that I have changed some of the default css to reduce the row spacing in the datagrid. I thought this might be the cause of the issue but copying a clean css sheet from a new blank app produces the same issue.

Perhaps you might have a better idea of where I should look next.

Thanks

[apearce]

I found the culprit for this issue.

I have a main form with a column panel named “content_panel”.

I load different pages by adding forms to “content_panel”:

self.content_panel.clear()
self.content_panel.add_component(Location_Form(),full_width_row=True)

It is this column panel that adds the rogue vertical scroll bar when the browser is resized below min-width 991px or on mobile devices.

I can fix the issue with a “hide_vscroll” role for “content_panel” of overflow-y: hidden

I was struggling to find this because I was working on the issue being with the form I was loading not the main form.

I would be interested to know why this behaviour happens if anyone has any ideas?

[esmaricq]

I’m having the same issue and it’s really annoying.

Like you I’m also creating a main content panel on my base page then clearing and repopulating that with other forms.

I tried adding overflow-y: hidden to both my base page content panel, and my loaded home page content panel. I still get the annoying 2px scroll bar.

I’ve found this line in theme.css:

/* Allow overflows to show drop shadows in ColumnPanels
   This can create unwanted scrollbars; we compensate for this at the top level with .nav-holder .content {overflow-x: hidden;}
*/
.anvil-container-overflow {
  overflow-x: visible;
  overflow-y: visible;
}

If I change only overflow-y to hidden, it kills the scrollbar, but I get a bunch of tiny horizontal scrollbars on nearly every single element.
If I change them both to hidden. No scrollbars… however the edges of many elements are cut off…

Any other ideas or help?
Do you still have the same original solution or did you implement a newer fix in the future?