CODEWITHSUNDEEP
javascripthtmlcsselectron
GorvGoyl
GorvGoyl

Reputation: 49500

Add border to frameless window - Electron

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-command',electronWindowHt);

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

ipc.on('dom-ready-command', (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 compared to the content of HTML body.
enter image description here

So how can I make it pixel perfect?

Upvotes: 1

Views: 5775

Answers (4)

whaleluo
whaleluo

Reputation: 1

add css to body to fix(=add border to framelesswindow)

border:1px soild lightgrey;
overflow:hidden;
box-sizing:border-box;

I test it is ok

Upvotes: 0

patriot10
patriot10

Reputation: 181

I use Angular 10 for displaying frameless windows. The only way for me to determine window size int the renderer process was to use electronService this way:

this._electronService['_electron'].webFrame.context

Electron service was injected this way:
constructor(private _electronService: ElectronService)

And the module is ngx-electron.

Hope this will save some hours for somebody :)

Upvotes: 0

QuestionExterminator
QuestionExterminator

Reputation: 35

I know this has been answered but putting box-sizing: border-box; in your CSS should fix it.

Upvotes: 1

GorvGoyl
GorvGoyl

Reputation: 49500

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

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

Upvotes: 5

Related Questions