CODEWITHSUNDEEP
electron
user6806935
user6806935

Reputation:

Electron Take Up 100% Of Screen (Not Full Screen)

I've got an electron app, below is the main.js file:

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        height: 715,
        width: 1200,
        minWidth: 600,
        minHeight: 200,
        center: true
    });

    mainWindow.loadURL('file://' + __dirname + '/index.html');
});

As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but NOT to be in full screen, such that the dock and tool bar of the OS are hidden).

In simple CSS this is done by using 

width:100%;
height:100%;

I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it

Note: fullscreen: true is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden

Can anyone help?

Upvotes: 100

Views: 106041

Answers (7)

LMS5400
LMS5400

Reputation: 492

Took me a while to figure this out on Windows 11, using Electron 19. I have not tested Mac yet.

mainWindow = new BrowserWindow({
    ...
    // these settings don't really matter
  });


// this is the important part...
mainWindow.maximize();
mainWindow.setFullScreen(true);  // <-- this covers the start menu in Windows

Upvotes: 0

Nilay Thakkar
Nilay Thakkar

Reputation: 11

mainWindow.maximize();

 const { app, BrowserWindow, session } = require('electron');
 let mainWindow;

 app.on('ready', () => {
    mainWindow = new BrowserWindow({
       show: false,  // Don't show the window until it's ready
       webPreferences: {
           nodeIntegration: false,  // To ensure better security
           contextIsolation: true
       }
    });
    mainWindow.setTitle('Hello World');
    mainWindow.maximize();
    mainWindow.loadURL('www.google.com');  // Replace with your desired URL
    mainWindow.on('closed', () => {
       mainWindow = null;
    });
});

Upvotes: 0

eujandergois
eujandergois

Reputation: 1

The solution is simple, only add titleBarStyle: 'hidden' to declaration of your window.

const mainWindow = new BrowserWindow({
    movable: false,
    resizable: false,
    maximizable: false,
    minimizable: false,
    titleBarStyle: 'hidden', // watch this line
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      DevTools: false,
    }
  });

note that I only have tested on Windows OS and it can be change in other OS like Mac.

Upvotes: 0

Fabio
Fabio

Reputation: 176

try this code after your mainWindow declaration

mainWindow.once('ready-to-show', () => {
    mainWindow.maximize()
})

It worked for me

Upvotes: 13

Melvin Chipimo
Melvin Chipimo

Reputation: 381

Use this:

const electron = require('electron')
const { app, BrowserWindow } = electron

let win

app.on('ready', () => {
   const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
   win = new BrowserWindow({width, height})
   win.loadURL('https://github.com')
})

Upvotes: 38

LK.
LK.

Reputation: 2031

use this! 

win = new BrowserWindow({show: false});
win.maximize();
win.show();

Upvotes: 203

Vadim Macagon
Vadim Macagon

Reputation: 14847

Call mainWindow.maximize() to maximize the window after you create it.

Upvotes: 135

Related Questions