Electron cambiando el tamaño de una ventana sin marco

El paso a paso o código que hallarás en este post es la solución más sencilla y efectiva que hallamos a tus dudas o problema.

Solución:

Me las arreglé para averiguar cuál era el problema y descubrí que ni siquiera era un problema de javascript. Todo lo que tenía que hacer era modificar mi CSS para lo que quiero que se pueda arrastrar y lo que no.

Debido a que mi html y mi cuerpo también están configurados para arrastrar, es por eso que no pude cambiar el tamaño. Aquí está mi solución…

Tuve que hacer un nuevo elemento (div.dialog) y encerrar mi contenido dentro de eso. Junto con el siguiente 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:

Estás usando un método incorrecto:

mainWindow.setResizable(false)

Establece si el usuario puede cambiar el tamaño de la ventana manualmente.

mainWindow.isResizable()

Devuelve un valor booleano: si el usuario puede cambiar el tamaño de la ventana manualmente.

La respuesta mencionada en https://stackoverflow.com/a/32897808/11167389 está bien, pero hay otro enfoque que no afectará a ningún otro estilo y puede colocarse en cualquier ventana sin marco que tenga. VS Code, que se crea con electron, utiliza un enfoque similar para permitir el cambio de tamaño desde el encabezado.

Entonces, en su mayoría tiene una estructura como seguir con una barra de título que tiene -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;

  
Window Header
  

    -
    +
    x
  

Ahora, puedes agregar un div con clase titlebar-drag-region dentro de su barra de título, configure position:relative; a la barra de título y eliminar -webkit-app-region: drag; de eso.

Qué .titlebar-drag-region lo que hace es que crea una región arrastrable que es ligeramente más corta en dimensiones en comparación con el encabezado (barra de título). El espacio de 6px que dejamos en los bordes se usa para cambiar el tamaño. Eso es todo. Tendrá un encabezado que se puede arrastrar y cambiar de tamaño desde todos los bordes.

Entonces, solo crea .titlebar-drag-region una vez y luego soltar

.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;

  
  
  
Window Header
  

    -
    +
    x