CAM operation scrollbar does not appear using dev bundle in Chrome

[lorenmcconnell]

trafficstars

I am using LaserWeb4 built from source (using the bundle-dev script) so that I can experiment with some custom laser control for my CNC platform. A minor problem I have had in using the software is that the scrollbars do not appear in the panel for CAM operations. This makes it difficult to scroll through the parameters. Here is a screen capture:

Using the binary distribution, the scrollbars appear and work just fine. An image for reference:

Do you have any advice to get the scroll bars working with bundle-dev and Chrome?

Workspace.json.txt mm_test.zip

[cprezzi]

I can confirm the problem, either with chome or firefox. I will try to find the reason (probably css error). If somebody finds the problem quicker than me, please report here!

[easytarget]

This literally started happening when I started trying to work today; running Chromium for Fedora; I just wanted to add a couple of reference points:

• Within the last couple of days Chromium was upgraded in the distribution repos of Fedora from chromium.x86_64 75.0.3770.100-3.fc30 to 76.0.3809.132-2.fc30 - Obvious candidate. This was working yesterday, I upgraded at the end of day, failed this morning.
• Searching for 'chromium scrollbar issues' produces a rash of websites telling you to disable HW acceleration in advanced settings, or Scrollbar overlays (chrome://flags/#overlay-scrollbars). Neither of these work for this scenario. edit: ~~* This is an issue with Chromium (the community chrome release); I also have Googles chrome release on the same machine (v77.0.3865.75) and this is not affected.~~
• NO! it now affects chrome 78.0.3904.34
• I have never installed any extensions to Chromium, it's extension list is empty. To double-check I used incognito mode and the issue persists.

Finally; I started prodding around in the developer tools and while I couldn't pin down a specific issue; disabling the Bootstrap css/js <style> line restored the scrollbars (while screwing everything else up, of course). I'm wondering if a bootstrap upgrade may help (It's pretty old, 3.3.7 from 2016); or if it's just another bootstrap scrollbar bug (eg: https://github.com/twbs/bootstrap/pull/29320)

[easytarget]

Needing some sort of solution and not being able to fix this properly (no clue how, no nodejs/java programming experience, and this..) I decided to, at least, test different combos of browser and OS to see what is affected

. The scrollbars are missing for me in Google Chrome 78 on Linux, Google Chrome 77 on Windows, and Chromium 76 on Linux (these are the versions I tested, not necessarily the first version it occurs in!, linux distro is Fedora30).

Google Chrome78:

Chromium76:

I have 'solved' this by reverting to Chromium 73 on Linux, allowing me to still have Google Chrome at the latest version for other web use. It kinda helps that I'm a redhat build engineer (amongst other things); so simple to set up and maintain for me but I'm not sure how available this would be to others.

[cprezzi]

It seems that something changed in chromium and chrome that caused the scrollbar issue, but I was not able to find a workaround yet. As @easytarget wrote, it would probably be the best to bring all dependencies to an actual state (and hope the problem will be solbed then). This would also solve the problem with compiling the whole project. I would be happy if someone could help with that. (see also my response in https://github.com/LaserWeb/LaserWeb4/issues/562)

[lorenmcconnell]

I may have found the solution. The parent div for the operations lacks an overflow style attribute. I found that setting it to auto brings back the missing scrollbar. Here's the change that seems to be working for me on Win 10 Chrome 78.0.3904.108.

> git diff src/components/cam.js
diff --git a/src/components/cam.js b/src/components/cam.js
index f85b821..832bcb6 100644
--- a/src/components/cam.js
+++ b/src/components/cam.js
@@ -217,7 +217,7 @@ class Cam extends React.Component {
                     </table>
                 </Alert>
                 <OperationDiagram {...{ operations, currentOperation }} />
-                <Operations style={{ flexGrow: 2, display: "flex", flexDirection: "column" }} />
+                <Operations style={{ flexGrow: 2, display: "flex", flexDirection: "column", overflowY: "auto" }} />
             </div>);
     }
 };

[cprezzi]

@lorenmcconnell Very nice find, thank you! I will check it and patch the code here, if it works.

[zettrik]

I was running into the same problem. The quick fix for me was to remove "height: 100%" from the "#sidebar .pane-content" div element. Sorry I was also not able to build LaserWeb4 from source, that's why no patch/pull request.

Btw. thanks for your great work! We are using LaserWeb in our local Hackspace and it's just running fine.

[cprezzi]

Yes, we seem to have a dependency compatibility problem, so I can't compile it neither. I need to investigate what the problem is.