I'm trying to use the titleBarOverlay option in electron.js but when I try to drag the window, it won't drag. When I remove the option, the dragging feature works like normal. Is there a workaround for this?
index.js:
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
height: 600,
width: 800,
title: "Last Horizon",
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#2e2e2e',
symbolColor: '#ff6d4b'
},
webPreferences: {
nodeIntegration: true
}
});
mainWindow.removeMenu()
mainWindow.loadFile('src/index.html');
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="titleBar"></div>
<div class="main">
<h1>Hello World!</h1>
</div>
</body>
</html>
styles.css
html, body {
-webkit-app-region: drag;
background-color: #2e2e2e;
color: white;
}
.titleBar {
/* -webkit-app-region: drag; */
background-color: #ffffff;
width: 100%;
height: 32px;
}
Your BrowserWindow needs to have it's frame option set to false else the native titleBar will display, which in turn is then used by the OS to drag the window around, not your designated html region.
index.js
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
height: 600,
width: 800,
title: "Last Horizon",
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#2e2e2e',
symbolColor: '#ff6d4b'
},
frame: false, // <-- Add this line
webPreferences: {
nodeIntegration: true
}
});
mainWindow.removeMenu()
mainWindow.loadFile('src/index.html');
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="titleBar"></div>
<div class="main">
<h1>Hello World!</h1>
</div>
</body>
</html>
styles.css
html, body {
background-color: #2e2e2e;
color: white;
}
.titleBar {
-webkit-app-select: none; /* <-- Add this line */
-webkit-app-region: drag; /* <-- Add this line */
background-color: #ffffff;
width: 100%;
height: 32px;
}
See Create frameless window and Set custom draggable region for more information.
Additionally, see BrowserWindow options for more information on the interaction between titleBarStyle and titleBarOverlay.