Electron Resizing a Frameless Window

Question

I'm working on an app that has a frameless window, and has a html5 video element that displays the webcam filling the document.body at 100%.

I have my mainWindow set to resizable mainWindow.isResizable(true) but I can't resize the window.

When I debug with chrome dev tools I can only resize the window the side chrome dev tools is on. (not sure if it helps, but I'm developing this on an Ubuntu 14.04 based Linux distro called Elementary OS Freya)

Can someone explain why I can't resize my resizable window even though I have my mainWindow set to resizable?

In addition what can I do to solve this problem?

var app = require("app");
var BrowserWindow = require("browser-window");

var mainWindow = null;

// Quit when all windows are closed.
app.on("window-all-closed", function() {
  app.quit();
});

app.on("ready", function() {
  mainWindow = new BrowserWindow({
    width: 640,
    height: 480,
    frame: false
  });
  mainWindow.loadUrl("file://" + __dirname + "/index.html");

  // Set Window Resizable
  mainWindow.isResizable(true);

  mainWindow.focus();
});

Mindexpanding

Answer 1

I managed to figure out what the problem was, and come to find out it wasn't even a javascript problem, All I had to do is mod my CSS for what I want draggable and what I don't.

Because my html and body are also set to draggable that's why I couldn't resize. Here's my solution...

I had to make a new element (div.dialog) and encase my content inside of that. Along with the following CSS.

.dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.5);
  -webkit-app-region: no-drag;
}
.tips {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  -webkit-app-region: drag;
}

HTML:

<div class="dialog" data-action="toggle">
  <header class="tips" data-action="toggle">
    <div>
      <nav>
        [Space] for Snapshot<br>
        [Esc] to Close
        <p data-action="toggle-tips">[Tab] to Toggle Dialog</p>
      </nav>
    </div>
  </header>
</div>

Mindexpanding

Thank you. This basically answers my question, when you mark a window as "frame: false" and then enable "-webkit-app-region: drag", the drag flag disables the window-resize-handles. I was hoping there was another solution as I've already designed the UI, but this just confirms my suspicions that you need to make a "no-drag" border to get the window-resize-handles back. – Featherstitch

Answer 2

Answer mentioned at https://mcmap.net/q/979926/-electron-resizing-a-frameless-window is okay but there is an another approach which will not affect your any other style and can be dropped in any frameless window that you have. VS Code which is created using electron uses similar approach to allow resizing from header.

So, you mostly have structure like following with a title-bar having -webkit-app-region: drag;:

.title-bar {
  display: flex;
  height: 30px;
  border: 1px solid gray;
  align-items: center;
  -webkit-app-region: drag;
}

.title {
  margin-left: 10px;
}

.title-bar-btns {
  margin-left: auto;
  -webkit-app-region: no-drag;
}

<div class="title-bar">
  <div class="title">Window Header</div>
  <div class="title-bar-btns">
    <button id="min-btn">-</button>
    <button id="max-btn">+</button>
    <button id="close-btn">x</button>
  </div>
</div>

Now, you can add a div with class titlebar-drag-region inside your title-bar, set position:relative; to title-bar and remove -webkit-app-region: drag; from it.

What .titlebar-drag-region does is that it creates a draggable region that is slightly shorter in dimensions compared to header (title-bar). The 6px gap that we left at borders is then used for resizing. Thats it. You will have a header that is draggable as well as resizable from all edges.

So, just create .titlebar-drag-region once and then drop <div class="titlebar-drag-region"> in headers of all windows.

.titlebar-drag-region {  /*added*/
  top: 6px;
  left: 6px;
  display: block;
  position: absolute;
  width: calc(100% - 12px);
  height: calc(100% - 6px);
  z-index: -1;
  -webkit-app-region: drag;
}

.title-bar {
  display: flex;
  height: 30px;
  border: 1px solid gray;
  align-items: center;
  position: relative;  /*added*/
  /*-webkit-app-region: drag;*/  /*removed*/
}

.title {
  margin-left: 10px;
}

.title-bar-btns {
  margin-left: auto;
  -webkit-app-region: no-drag;
}

<div class="title-bar">
  <div class="titlebar-drag-region"></div>  <! –– added ––>
  <div class="title">Window Header</div>
  <div class="title-bar-btns">
    <button id="min-btn">-</button>
    <button id="max-btn">+</button>
    <button id="close-btn">x</button>
  </div>
</div>

Hyponitrite

Answer 3

You are using wrong method:

mainWindow.setResizable(false) Sets whether the window can be manually resized by user.

mainWindow.isResizable() Returns a Boolean - Whether the window can be manually resized by user.

Vulcanize