I am making small code editor and i want user to be able to resize window if user wants. I have main window property non resizable.
mainWindow = new BrowserWindow({width: 800, height: 600 , resizable: false});
I have button
I have drop down menu :
label: 'Screen',
submenu:[
{
label:'Resizable Window',
click(){
mainWindow.resizable = false;
}
},
My code doesn't work. Please help me to fix it.
To change if a window is resizable you have to call mainWindow.setResizable(false) instead of .resizable = false.
And it seems that you're setting resizable to false when it's already false, I think you want to set it to true to enable resizing.
In summary you would end up with something like:
label: 'Screen',
submenu: [
{
label: 'Resizable Window',
click () {
mainWindow.setResizable(true);
}
},
],
.setResizable Docs.
In a usual canvas css width and client width could be not equal to each other, how to get this on Fabricjs? As an example: I want 640*360px canvas on a page with 1280*720px image inside.
I know I could scale image, but dataUrl will give me a smaller picture, isn't it?
There is a solution. You could init Fabric.js with CSS sizes and then setDimensions with backstoreOnly flag or init with desired client size and use setDimensions with cssOnly flag.
Example #1:
var canvas = new fabric.Canvas('c', {width: 640, height: 360});
canvas.setDimensions({width: 1280, height: 720}, {backstoreOnly: true});
Example #2:
var canvas = new fabric.Canvas('c', {width: 1280, height: 720});
canvas.setDimensions({width: '640px', height: '360px'}, {cssOnly: true});
You can change the size of the canvas using the setWidth/setHeight properties of the canvas http://fabricjs.com/docs/fabric.StaticCanvas.html#setWidth
e.g.
canvas = new fabric.Canvas('c');
canvas.setWidth(640);
canvas.setHeight(360);
Though you should clarify what you mean.
How do I remove this menu-bar from my electron apps:
Also it says "Hello World"(is this because I downloaded electron pre-built, and will go away once I package the application?). I didn't code these into the html, so I don't know how to get it out!-
You can use w.setMenu(null) or set frame: false (this also removes buttons for close, minimize and maximize options) on your window. See setMenu() or BrowserWindow(). Also check this thread
Electron now has win.removeMenu() (added in v5.0.0), to remove application menus instead of using win.setMenu(null).
Electron 7.1.x seems to have a bug where win.removeMenu() doesn't work. The only workaround is to use Menu.setApplicationMenu(null), however, this will disable all the menu shortcuts like F11 for toggling fullscreen etc.
In new versions of Electron, you can set autoHideMenuBar: true while creating browserWindow, pressing Alt will show the menu bar again.
const mainWindow = new BrowserWindow({
autoHideMenuBar: true,
})
Use this:
mainWindow = new BrowserWindow({width: 640, height: 360})
mainWindow.setMenuBarVisibility(false)
Reference: https://github.com/electron/electron/issues/1415
I tried mainWindow.setMenu(null), but it didn't work.
For Electron 7.1.1, you can use this:
const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)
The menu can be hidden or auto-hidden (like in Slack or VS Code - you can press Alt to show/hide the menu).
Relevant methods:
---- win.setMenu(menu) - Sets the menu as the window’s menu bar,
setting it to null will remove the menu bar. (This will remove the menu completly)
mainWindow.setMenu(null)
---- win.setAutoHideMenuBar(hide) - Sets whether the window menu bar
should hide itself automatically. Once set the menu bar will only
show when users press the single Alt key.
mainWindow.setAutoHideMenuBar(true)
Source: https://github.com/Automattic/simplenote-electron/issues/293
There is also the method for making a frameless window as shown bellow:
(no close button no anything. Can be what we want (better design))
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows
doc: https://electronjs.org/docs/api/frameless-window
Edit: (new)
win.removeMenu() Linux Windows Remove the window's menu bar.
https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows
Added win.removeMenu() to remove application menus instead of using win.setMenu(null)
That is added from v5 as per:
https://github.com/electron/electron/pull/16570
https://github.com/electron/electron/pull/16657
Electron v7 bug
For Electron 7.1.1 use Menu.setApplicationMenu instead of win.removeMenu()
as per this thread:
https://github.com/electron/electron/issues/16521
And the big note is: you have to call it before creating the BrowserWindow! Or it will not work!
const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(null);
const browserWindow = new BrowserWindow({/*...*/});
UPDATE (Setting autoHideMenuBar on BrowserWindow construction)
As by #kcpr comment! We can set the property and many on the constructor
That's available on the latest stable version of electron by now which is 8.3!
But too in old versions i checked for v1, v2, v3, v4!
It's there in all versions!
As per this link
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md
And for the v8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions
The doc link
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions
From the doc for the option:
autoHideMenuBar Boolean (optional) - Auto hide the menu bar unless the Alt key is pressed. Default is false.
Here a snippet to illustrate it:
let browserWindow = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true // <<< here
})
When you package your app the default menu won't be there anymore, if this is bugging you during development then you can call setMenu(null) on the browser window as suggested by #TonyVincent.
As of 7.0.0, most of the above solutions no longer work.
BrowserWindow.setMenu() has been replaced by Menu.setApplicationMenu(), which now changes the menu on all windows. setMenu(), removeMenu() no longer do anything, Which by the way are still mentioned in the docs.
setAutoHideMenuBar() still works, but could be a nuisance if you planned to use Alt as a hotkey modifier. Once menu is visible you have to click away from window (loose focus) to hide menu again.
If your application has more than one window, you can't set/remove menus separately on each window. The only way to remove a menu is to use the frameless window approach. That happens to be what I want in my current application, but not a good solution in all cases.
#"electron": "^7.1.1" :
mainWindow = new browserWindow({ height: 500, width: 800});
//mainWindow.setAutoHideMenuBar(true);
mainWindow.autoHideMenuBar = true;
Working as expected without menu in browser.
These solutions has bug.
When use solutions at below, windows has delay at closing.
Menu.setApplicationMenu(null),
&&
const updateErrorWindow = new BrowserWindow({autoHideMenuBar: true});
I used solution at below. This is better for now.
const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
set autoHideMenuBar to true while creating the browserWindow
mainWindow = new BrowserWindow({
autoHideMenuBar: true,
width: 1200,
height: 800
})
Electron 12.0.6:
let mainWindow = new BrowserWindow({
autoHideMenuBar: true
});
Following the answer from this issue, you must call Menu.setApplicationMenu(null) before the window is created
2020 Update, the only bl**dy thing that worked for me:
Menu.setApplicationMenu(new Menu());
setMenu(null); is the best answer, autohidemenu will display on the start of the application
function createWindow(){
const win = new BrowserWindow({
width: 1500,
height: 800,
webPreferences:{
nodeIntergration: true
}
});
win.setMenu(null);
win.loadFile("index.html");
}
app.whenReady().then(createWindow);
Before this line at main.js:
mainWindow = new BrowserWindow({width: 800, height: 900})
mainWindow.setMenu(null) //this will r menu bar
Most of the answers here are not valid for newer versions. With the version of 9.0 or upper, Menu.setApplicationMenu(null); should work. By the way, Menu exported from electron package: const {Menu} = require('electron');
According to the official documentation # https://github.com/electron/electron/blob/v8.0.0-beta.1/docs/api/menu.md the proper way to do this now since 7.1.2 and I have tested it on 8.0 as well is to :
const { app, Menu } = require('electron')
Menu.setApplicationMenu(null)
Even if autoHideMenuBar: true, you still can toggle menu bar with Alt key.
So to hide it completely, use mainWindow.setMenu(null)
I am opening SharePoint dialog using following code:
var options = {
title: dialogTitle,
width: 800,
height: 600,
url: uri
}
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
However, the dimensions are in pixels. Is there any way to make the Pop-up responsive?
I've just jumped into developing apps for chrome, and just started with the "Hello World" example. My first thing I wanted to change is to prevent resizing of the window, I've searched and got nothing... :(
So, is this even possible right now?
Also, reading the documentation it says 'panel' is non-resizable,but at least in windows it is...
Use the resizable flag.
chrome.app.window.create("YourPage.html", {
"bounds": {
"width": 320,
"height": 240,
},
"resizable": false,
});
Specify min and max width and height when creating a window to constrain it. You can set min and max to the same value to make the window non-resizable.
E.g., here is a modified main.js from the Hello World sample:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html',
{minWidth: 500, minHeight: 309,
maxWidth: 500, maxHeight: 309});
});
For more details, see the app window api.