Electron: BrowserWindow min-width and min-height options doesn't work because are invalid javascript names

Created on 6 May 2015  ·  14Comments  ·  Source: electron/electron

According to documentation:

https://github.com/atom/electron/blob/master/docs/api/browser-window.md

Min width and height can be passed in options to BrowserWindow as min-width and min-height, but that options doesn't work because they are invalid javascript names:

https://mothereff.in/js-variables#min-width

setMinimumSize() works as expected though.

Most helpful comment

@sbruchmann, the code provided by you is not working. but this worked for me

new BrowserWindow({
  'minHeight': 300,
  'minWidth': 300
})

All 14 comments

Hello @hzeroo,

you have to put your keys in quotes if they contain invalid characters:

new BrowserWindow({
  'min-height': 300,
  'min-width': 300
})

Can be closed, didn't know ^^.

@sbruchmann, the code provided by you is not working. but this worked for me

new BrowserWindow({
  'minHeight': 300,
  'minWidth': 300
})

@bansalvks The code that I provided does not work _anymore_. In previous versions, these keys had to be written with dashes but it was deprecated in favour of camelCase.

@bansalvks That's enough:

new BrowserWindow({
  minHeight: 300,
  minWidth: 300
})

Setting minHeight, minWidth didn't work for me. I had to set the initial window size, and then set the minimum sizes:

new BrowserWindow({
  height: 300,
  width: 300,
  minHeight: 300,
  minWidth: 300
})

I'd like to add, that both minWidth and minHeight should be specified. I needed the window to stay above the min-width, but I haven't cared about min-height.. It didn't work like that. So always define both.

Also make sure not to put decimals, I had decimals in there and it threw it off. Trying to be exact is not always good if it doesn't work. Approximate instead of decimals.

this didnt work for me

new BrowserWindow({
      width: 800, height: 600,
      'minWidth':400,// even 'min-width' or minWidth
      frame:false
})

it worked for me only after i set the min height as :

new BrowserWindow({
  width: 800, height: 600,
  minHeight: 300,
  minWidth: 300,
  frame:false
})

In my case, I tried to set window size to be relative to screen size.
Make sure you pass integers

const screenElectron = electron.screen;
const display = screenElectron.getPrimaryDisplay();
const dimensions = display.workAreaSize;
mainWindow = new BrowserWindow({
    width: parseInt(dimensions.width * 0.8),
    height: parseInt(dimensions.height * 0.8),
    minWidth: parseInt(dimensions.width * 0.8),
    minHeight: parseInt(dimensions.height * 0.8),
    maxWidth: dimensions.width,
    maxHeight: dimensions.height,
    icon: `${__dirname}/assets/icon.ico`
  });

All of the above does not work on Windows 10, tested on electron 7 and 8. BrowserWindow can always be further minimized by 30-40 pixels.

@Celebes, this is working for me on Windows 10. I'm using Electron version 9.0.2.

new BrowserWindow({
  width: 800,
  height: 600,
  minWidth: 900,
  minHeight: 600,
})

@Celebes, this is working for me on Windows 10. I'm using Electron version 9.0.2.

new BrowserWindow({
  width: 800,
  height: 600,
  minWidth: 900,
  minHeight: 600,
})

your setting is work, but the width and height seem to unnecessary.

I use win10, and electron 9.1.0.

@Celebes, this is working for me on Windows 10. I'm using Electron version 9.0.2.

new BrowserWindow({
  width: 800,
  height: 600,
  minWidth: 900,
  minHeight: 600,
})

your setting is work, but the width and height seem to unnecessary.

I use win10, and electron 9.1.0.

What would setting the initial width smaller than the minwidth mean anyway?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tengyifei picture tengyifei  ·  3Comments

EladBezalel picture EladBezalel  ·  3Comments

sindresorhus picture sindresorhus  ·  3Comments

DanielDignam picture DanielDignam  ·  3Comments

tenry92 picture tenry92  ·  3Comments