How do I allow room for scrollbars when creating a WebContentsView in Electron?

Question

My Electron application temporarily uses a WebContentsView, layered on top of part of the main window, during a login process. The user needs to interact with the web page in this view.

Simplified code to add the window is as follows:

const currentWindow = BaseWindow.getAllWindows()[0];
const web = new WebContentsView({webPreferences: { partition: 'temp-login' }});
currentWindow.contentView.addChildView(web);
web.setBounds({
    x: 0,
    y: 0,
    width: currentWindow.getBounds().width - 16,
    height: currentWindow.getBounds().height,
});

Running on Windows, this works OK, and I also added a resize handler so that the view is updated if the main window is resized.

However as you can probably see, I had to add a '-16' to allow room for a scrollbar, which seems to occur outside the bounds of the WebContentsView. Otherwise users can only scroll the view with mouse wheel; this is bad for usability.

I don't like this because 16 is probably not right on all platforms or depending on user settings or display type. Also what if the login web pages change so they aren't large enough to show a scrollbar.

Ideally there would be something like web.setOuterBounds, or some extra option to include along with the width, or whatever. But I tried searching the documentation & web and couldn't find it. Is there a better solution?

sam marshall · Accepted Answer · 2025-08-07 08:25:01Z

I found the answer to my question. I had misunderstood the problem. The issue was not the scrollbar, but how I was computing the size of the inner WebContentsView.

I used getBounds() on the window, but this returns the outer bounds including the window borders, menu etc, whereas the bounds for the web view are expressed relative to the content view.

So the correct code should be

const currentWindow = BaseWindow.getAllWindows()[0];
const web = new WebContentsView({webPreferences: { partition: 'temp-login' }});
currentWindow.contentView.addChildView(web);
web.setBounds({
    x: 0,
    y: 0,
    width: currentWindow.contentView.getBounds().width,
    height: currentWindow.contentView.getBounds().height,
});

Collectives™ on Stack Overflow

How do I allow room for scrollbars when creating a WebContentsView in Electron?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related