CODEWITHSUNDEEP
javascriptcsselectronchromium
Colin Cline
Colin Cline

Reputation: 1279

Small gap in very right side of window (window oversize)

i just started to make a new app by electron and find out after adding a new feature in my app, a very hard to notice white(or maybe transparent) gap added in very right side of the window.
More explanation: I made an application that fetch something from server and after some manipulation, will display them in main window. The application just has 1 window (its quite simple app) and this is configuration for window that i added into main js "Before" gap shows up:

mainWindow = new BrowserWindow({
    show      : false,
    width     : 820,
    height    : 520,
    frame     : false,
    resizable : false,
    title     : "blah blah blah"
})

After that i decided to expand the app and cache last location of the window before user try to close window so in next time that user will open the app, the window will at the same prev place. So i added some extra function to catch window "x" and "y" and save them into a "json" file in "appData". I changed window config to this one:

mainWindow = new BrowserWindow({
    show      : false,
    width     : 820,
    height    : 520,
    frame     : false,
    resizable : false,
    title     : "blah blah blah",
    x         : {get x from storage},//this is pseudo 
    y         : {get y from storage}//this is pseudo 
})

Now a small gap appears in right side as shown in pictures below. More explanation in pictures caption.

HTML:

<body>
    <div class="hello-rob">
        <div class="nav"></div>
    </div>
</body>

CSS:

body,
html {
    position: relative;
    width: 820px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
}

x_y_and_css_and_gap caption: Css width set to "820px" same as window "width" in main. js, as you can see there is almost "2-3px" white gap (i marked with a circle)

comment_css_width caption: If i comment the css width, then the window will expand to its real width that is "822.4px"

x_y_comment caption: When i comment "x" and "y" in main.js and css "width" presence, every thing seems fine.

P.S: i don't think this issue its just about "x" and "y" that set in main.js and regardless of that the main problem is:

Why and how the window is bigger than what we set for it in main.js and in css?

Upvotes: 3

Views: 628

Answers (1)

Colin Cline
Colin Cline

Reputation: 1279

Please note:

  1. This is not a "permanent solution", this is just a temporary hotfix before electron team diagnose what is the main cause of this behavior by electron.js.
  2. Thanks to @mplungjan and @Mike to reminding me to read documentation once again

I tried to watch/trace "window size" in every moment so that i can find out inside the electron core "window size" is inaccurate or no, something in renderer.js is involve?!

Based on this results (from main.js), its obvious changes happen in main.js part.

This is main.js console (when extra gap is evident):

[ 823, 522 ]// console.log(mainWindow.getSize());
[ 822, 521 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 101, width: 823, height: 522 }// console.log(mainWindow.getBounds());

From the results you can see electron uses setSize, getSize to demonstrate window size and obviously its not accurate because the window's size should be "820px" * "520px".

How to fix this: (please consider big part of codes below are not new, new tricky-lines has a comment) 

function createWindow(){
    mainWindow = new BrowserWindow({
        show      : false,
        width     : 820,
        height    : 520,
        frame     : false,
        resizable : false,
        title     : "blah blah blah",
        x         : {get x from storage},//this is pseudo 
        y         : {get y from storage}//this is pseudo 
        minWidth: 820,// new
        maxWidth: 820,// new
        minHeight: 520,// new
        maxHeight: 520// new
    })

    // in this function i called console.log()
    mainWindow.once('ready-to-show', () => {
        mainWindow.show();
        mainWindow.setSize(820,520);// new (i didn't checked but maybe before `mainWindow.show();` is better to place this line of code)
    })
}


app.on('ready', () => {
    createWindow()
})


Another test to check the effect of changes:

[ 820, 520 ]// console.log(mainWindow.getSize());
[ 820, 520 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 100, width: 820, height: 520 }// console.log(mainWindow.getBounds());

And the gap no longer exists.
P.S: personally i don't like this kind of solutions, so if any one else was able to represent a better solution i'll accept it as an answer.

Upvotes: 1

Related Questions