Electron Resizing a Frameless Window

Answer mentioned at https://stackoverflow.com/a/32897808/11167389 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>

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>

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.