Electron window fill screen


#1

Hi I want to have my window fill the viewport. What I mean is that I do not want full screen, but I want the window to stretch the entire width of the screen and the height to be as tall as possible (Usually limited by a dock on windows and mac).

Basically, I want the app to open in a size that is as large as possible.

Thanks!


#2

Check the workArea property of the display object you get from the screen module.

const screen = require('electron').screen
const display = screen.getPrimaryDisplay()
console.log(display.workArea)

#3

This works very well and does everything I need!

Thanks for responding!


#4

Hi, I’m new in Atom. Where I can find workArea, display and screen module that @john said? Thanks.

Greetings,
Alberto


#5

Hey!

So you can find the screen object by calling const screen = require('electron').screen;
Note that the screen object can only be called AFTER app.ready is called.

The display object can be retrieved by calling const display = screen.getPrimaryDisplay().
Electron will gather all sorts of information about the display which the app will be displayed on.

Lastly, you can get the work area by calling display.workArea.

Here is an example:

app.ready(function() {
    const screen = require('electron').screen;
    const display = screen.getPrimaryDisplay();
    const area = display.workArea;

    console.log(area.width); // example parameter of the area object
});

Hope this helps!

Respond if you need anything else!