How can I properly add border to a frameless electron browser window? My frameless window height is according to the content in the page which makes it difficult to add border around it.

This is how i'm doing it now:

1) I'm adding the border to html:

html{
    border-style: solid;
    border-color: slategray;
    border-width: 5px;
}

2) calculating the height of the window from the renderer side js:

let pageHeight = ( $('body').outerHeight(true));
    $('html').height(Math.ceil(pageHeight));
    let margin = 9;
    let electronWindowHt = Math.ceil(pageHeight)+margin;
    ipcRenderer.send('dom-ready-mand',electronWindowHt);

3) setting the size of the window from the main js:

ipc.on('dom-ready-mand', (event, height) => {
    clipboardWindow.setSize(config.WIDTH, height, false);
clipboardWindow.setPosition(clipwin_x, clipwin_y, false);
// other code
.
.
.
    })

The issue is it is not pixel perfect. Sometimes it works fine but sometimes when html body content increases or decreases I get a bit smaller height electron window than the content. which hides the bottom border and I need to scroll up to see that border. If I increase the height a bit then next time I get some white space left below the bottom border. Width is not an issue as it is always fixed.

As you can see in the below image, bottom border is hidden a bit because of smaller electron window size as pared to the content of HTML body.

So how can I make it pixel perfect?

How can I properly add border to a frameless electron browser window? My frameless window height is according to the content in the page which makes it difficult to add border around it.

This is how i'm doing it now:

1) I'm adding the border to html:

html{
    border-style: solid;
    border-color: slategray;
    border-width: 5px;
}

2) calculating the height of the window from the renderer side js:

let pageHeight = ( $('body').outerHeight(true));
    $('html').height(Math.ceil(pageHeight));
    let margin = 9;
    let electronWindowHt = Math.ceil(pageHeight)+margin;
    ipcRenderer.send('dom-ready-mand',electronWindowHt);

3) setting the size of the window from the main js:

ipc.on('dom-ready-mand', (event, height) => {
    clipboardWindow.setSize(config.WIDTH, height, false);
clipboardWindow.setPosition(clipwin_x, clipwin_y, false);
// other code
.
.
.
    })

The issue is it is not pixel perfect. Sometimes it works fine but sometimes when html body content increases or decreases I get a bit smaller height electron window than the content. which hides the bottom border and I need to scroll up to see that border. If I increase the height a bit then next time I get some white space left below the bottom border. Width is not an issue as it is always fixed.

As you can see in the below image, bottom border is hidden a bit because of smaller electron window size as pared to the content of HTML body.

So how can I make it pixel perfect?

• javascript
• html
• css
• electron

4 Answers 4

My stoned cousin put clipboardWindow.setSize(config.WIDTH, Math.ceil(height), false); at the last line of ipc.on('dom-ready-mand') event.

Strangely enough, it fixed the issue with the incorrect height. Now it's pixel perfect