Components are out of browser view and scrolling not allowed

Bug Reports
1

Hi all,

I have an app with two data grids in it. When I launch the app the bottom data grid is out of view and the window does not give me a scrollbar to scroll down. I have to zoom way out to see everything, or zoom way in until a scroll bar appears.

Here is a silly clone that demonstrates this:
https://anvil.works/build#clone:PQG32Z7WEVMHF2B6=N7XVFTAZTDLDATTVWPTTA5ZG

Have you seen this before?

2

Due to my screen resolution I had to copy/paste quite a few more, but in the IDE at least, when I ran the project, I had scroll bars appear.

What OS/browser are you using? I’m on Debian 9/FF Quantum.

Edit -
ah, but it doesn’t work in Chrome! I see the same thing as you.
Version 69.0.3497.100 (Official Build) (64-bit)

1 Like
3

Thanks for verifying David.

Scrolling works normally on Firefox 63.0.

Scrolling does not work on Chrome versions 67.0.3396.99 or 66.0.3359.181-1, Ubuntu 16.04 LTS and Ubuntu 18.04 LTS, respectively.

@meredydd should we move to bug reports?

4

Oh, crumbs. Yes, this is a bug - side effect of the embedding issue from last week. Affects all newly-created Material Design apps. Stand by, fixing as a matter of urgency…

5

I’m thankful for that, as I have to do a demo today. But either way, I can make do. Take are.

6

Fixed. Sorry about that.

1 Like
7

Not a problem! Thanks for the fix.

8

@meredydd Not working yet on Chrome. Perhaps it takes a bit for the fix to kick in.

9

I’m guessing you will need to apply a hot patch to an existing project, as @meredydd suggested all new projects were affected.

@meredydd will need to confirm that.

1 Like
10

Yes - new projects will have the fix, but old projects will need it copying over. Presumably you haven’t customised your existing project much, so the simplest way is to make a new project and copy and paste over the contents of style.css.

Otherwise, you’ll need to get into your CSS and replace:

.nav-holder .content {
  flex: 1;
  overflow: hidden;
}

with:

.nav-holder .content {
  flex: 1;
  overflow-x: hidden;
}
3 Likes
11

Yep, the copy and past of that little snippet did the trick. Really appreciate that!