javascript - Add border to frameless window - Electron - Stack Overflow

admin管理员组

文章数量:1390564

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

Share Improve this question Follow edited Nov 24, 2017 at 9:48 GorvGoyl asked Nov 9, 2017 at 7:20 GorvGoylGorvGoyl 49.9k3737 gold badges261261 silver badges264264 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

本文标签： javascriptAdd border to frameless windowElectronStack Overflow