Electron title bar "no-drag" and "drag" not working

Question

I have a #topleft red title bar containing multiple "tab" buttons that should fill all the available space except a #topright blue block.
It is possible to move the main Electron window by click-and-dragging on #topleft's red background, thanks to -webkit-app-region: drag;. This works.

Problems:

1. clicks on #topright are ignored: alert() is not triggered (same problem for child elements of this block)
2. #topright span:hover { background-color: black; } is ignored
3. #topright { -webkit-app-region: no-drag; } is ignored: we can still move the window by click-and-dragging on #topright whereas it should not

However if we run the same HTML code in a browser, all is working correctly.

How to solve this in Electron?

for (var i = 0; i < 50; i++)
document.getElementById("topleft").innerHTML += "<button>xyz" + i + "</button>";

* { margin: 0; }
#topright { float: right; width: 100px; background-color: blue; -webkit-app-region: no-drag; }
#topright:hover { background-color: black; }
#topleft { background-color: red; -webkit-app-region: drag; padding: 10px; }

<div id="topright" onclick="alert();">Click here!</div>
<div id="topleft"></div>

Note:

• I've already seen I've already seen Frameless window with controls in electron (Windows) but it doesn't help here.

• Linked issue

Idolatrize

Answer 1

I'm not familiar with Electron but you could try moving the floated blue element within the red element.

const max = 50;
let   i   = 0;

for ( ; i < max; i++ ) {
  document.getElementById( 'topleft' ).innerHTML += `<button>xyz${ i }</button>`;
}

* {
  margin: 0;
}

#topleft {
  background-color: red;
  -webkit-app-region: drag;
  padding: 10px;
}

#topright {
  float: right;
  margin: -10px -10px 0 0;
  width: 100px;
  background-color: blue;
  -webkit-app-region: no-drag;
}

#topright:hover {
  background-color: black;
}

<div id="topleft">
  <div id="topright" onclick="alert();">Click here!</div>
</div>

Note: I added some negative margins so that the blue element would butt up against the edges of the red element (vs being inside the red element because of padding).

Original Answer using absolute positioning and a "cloned" element. Updated answer due to new information.

Adviser

Thanks for the update @hungerstar! Please add your previous solution at the end of the question, or just a link to the previous edit, it might be useful for future reference :) – Idolatrize

Answer 2

In fact there is a very simple solution: just move the floating div inside #topleft:

<div id="topleft">
    <div id="topright" onclick="alert();">Click here!</div>
</div>

Idolatrize