nw.js
nw.js copied to clipboard
Frameless window has no shadow
In recent node-webkit versions the window of a frameless window has no shadow anymore (windows 7+); is it possible to get it back (as an option?)
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
I am personally using 0.11.1 because of this but I would like to see an option for this.
Possibly related to https://github.com/rogerwang/node-webkit/issues/2786
This is probably related to the addition of transparency. I've never seen OS default shadows on any application platform where transparent windows were allowed (Adobe AIR and appJS [when it was still alive]).
As a workaround (not as good as the OS default), you can use box-shadow
or maybe the dropshadow filter on any element inside of the body tag (like a main application element) and the shadow will show.
You'll have to add padding to the element and also enable transparency so the shadow isn't clipped and isn't on a background.
You'll also have to manage the padding and/or shadow when maximizing or going fullscreen.
I also think this bug is in relation to the introduction of the transparent property but it should be possible to enable the shadow again for non transparent windows (as before). This should be possible with something similar to
MARGINS borderless = {1,1,1,1}; DwmExtendFrameIntoClientArea(hwnd, &borderless);
(see http://stackoverflow.com/a/17713810/2282732).
@studiochris Your workaround would also disable resizing and the native platform features like aero snap on windows.
@xomz You are correct about resizing and other native features.
I found the shadow appear when I add the code as following:
var gui = require('nw.gui');
var win = gui.Window.get();
win.minimize();
win.restore();
Before the official fix this bug, we can try to solve this problem by this way.
:+1:
I have this problem too,expect to solved this problem as soon as possible。
:+1:
I didn't care for the window minimize / restore, so this hack just toggles the transparency - works for me.
var gui = require('nw.gui'); var win = gui.Window.get(); win.setTransparent(!win.isTransparent); win.setTransparent(!win.isTransparent);
jwjames83's workaround is better.
I just tried, jwjames83's workaround create shadow looks deeper, but I like lighter.
jwjames83's work-around doesn't work for me. I'm using 0.11.6. Anybody know if there is a way to get shadows back on 0.11.6?
I come to meet the same problem with latest nw version: 0.12.2, jwjames83's work-around works fine for me.
I come to meet the same problem with latest nw version: 0.12.2, jwjames83's work-around works fine for me.
I tried all of the workarounds, nothing worked for me. Furthermore I can also not use box-shadow because users can not resize the window correctly. I see this as prio1 feature, since a program without shadow will look strange on a background with the same color.
I don't see this as a priority 1 feature. Different people have different priorities though. Maybe you could go into the source and address the issue? If that's not possible, maybe worth posting a bounty for this to be fixed proportionate with how important it is for you?
@zzbo cool works for me and the shadow is lighter..
While @jwjames83 solution worked for me I opted for box-shadow option where you can control your shadow however you like.
Body tag got padding 20px, and the inner container the white background and box-shadow, just like regular html/css.
Then I've setup on focus/blur events on the window object to change the style of that shadow, like the native Windows windows are doing.
@mnemanja yeah i had also tried your way.. it is how we can take full control of the shadow :+1:
:+1: by the way I'm on the version 0.12.3
@mnemanja @fritx Note that this will add the resize cursor to the edge of the shadow, not to the inner container. As I described, this is the reason why I can't use it. @jgoalby How to post a bounty?