Elektronen-ändern der Größe einer Rahmenlosen Fenster
Arbeite ich an einer Anwendung, die eine rahmenlose Fenster, und hat ein html5-video-element, das zeigt der webcam, füllen Sie das Dokument.Körper bei 100%.
Habe ich meine mainWindow
eingestellt resizable mainWindow.isResizable(true)
aber ich kann nicht die Größe der Fenster.
Wenn ich Debuggen mit chrome dev tools kann ich nur die Größe der Fenster die Seite chrome dev tools auf. (nicht sicher, ob es hilft, aber ich bin der Entwicklung dieses auf Ubuntu 14.04 basierende Linux-Distribution namens Elementary OS Freya)
Kann mir jemand erklären, warum kann ich nicht die Größe meiner Fenster, obwohl ich meine mainWindow gesetzt resizable?
Außerdem, was kann ich tun, um dieses problem zu lösen?
var app = require("app");
var BrowserWindow = require("browser-window");
var mainWindow = null;
//Quit when all windows are closed.
app.on("window-all-closed", function() {
app.quit();
});
app.on("ready", function() {
mainWindow = new BrowserWindow({
width: 640,
height: 480,
frame: false
});
mainWindow.loadUrl("file://" + __dirname + "/index.html");
//Set Window Resizable
mainWindow.isResizable(true);
mainWindow.focus();
});
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich es geschafft, herauszufinden, was das problem war, und kommen, um herauszufinden, es war noch nicht einmal ein javascript-problem, Alles, was ich zu tun hatte, ist meine mod CSS für das, was ich will, gezogen und was weiß ich nicht.
Weil meine html-und der Körper sind ebenfalls festgelegt ziehbar deshalb konnte ich nicht die Größe. Hier ist meine Lösung...
Musste ich dafür ein neues element (
div.dialog
) und um meine Inhalte darin. Zusammen mit dem folgenden CSS.HTML:
Verwendung falsche Methode:
mainWindow.setResizable(false)
Legt fest, ob das Fenster manuell in der Größe angepasst, indem user.
mainWindow.isResizable()
Gibt einen booleschen Wert zurück - Ob das Fenster manuell in der Größe angepasst, indem user.
Antwort erwähnt https://stackoverflow.com/a/32897808/11167389 ist okay, aber es ist ein anderer Ansatz, der keinen Einfluss auf Ihre anderen Stil und gelöscht werden können, in jedem rahmenlosen Fenster, die Sie haben.
VS-Code , die erstellt wird, mithilfe von Elektronen verwendet ähnlichen Ansatz ermöglichen die Größenänderung aus dem header.
So, Sie haben meist die Struktur, die wie folgt mit einer Titel-Leiste mit
-webkit-app-region: drag;
:CSS:
HTML:
Nun, können Sie fügen Sie ein div mit der Klasse
titlebar-drag-region
in Ihrem Titel-Leiste verwenden, legen Sieposition:relative;
Titel-Leiste und entfernen Sie-webkit-app-region: drag;
aus.Was
.titlebar-drag-region
tut, ist, dass es schafft einen ziehbar region, die ist etwas kürzer in den Abmessungen im Vergleich zu den header (Titel-bar). Die 6px Lücke, die wir Links, an den Grenzen wird dann verwendet, für die Größe. Thats it. Sie haben einen header, der ist ziehbar als auch resizable aus allen Kanten.So, erstellen Sie einfach
.titlebar-drag-region
einmal und fallen dann<div class="titlebar-drag-region">
im Header aller windows.CSS:
HTML: