Menu
I'm trying out the electron to create a standalone version of the website, I have this main.js (excerpt)
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
"min-width": 800,
"min-height": 500,
resize: true,
"use-content-size": true
});
// and load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.html');
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Set Window Resizable
mainWindow.isResizable(true);
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
}
then index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
background-color: #6e6e6e;
}
webview {
display: block;
}
</style>
</head>
<body>
<webview src="build/index.html" disablewebsecurity></webview>
</body>
</html>
unfortunately the content (webview) is not resized to fill available space, it has full width but height remains at 150px, when I manually set different size in the inspector panel then it adjusts. How can I tell webview that it should take full space? percentage doesnt work ie.
webview {
width:100%;
height:100%;
}
I have added following code to the index.html
<script>
function onResize() {
var height = document.body.clientHeight;
var width = document.body.clientWidth;
console.log("onResize", arguments, width, height);
}
addEventListener('resize', onResize);
</script>
Which outputs following results (height always 150!)
onResize [Event] 216 150
index.html:27 onResize [Event] 216 150
index.html:27 onResize [Event] 1096 150
index.html:27 onResize [Event] 1096 150
index.html:27 onResize [Event] 1096 150
index.html:27 onResize [Event] 1080 150
0: Event
bubbles: true
cancelBubble: false
cancelable: false
currentTarget: null
defaultPrevented: fals
eeventPhase: 0
isTrusted: false
isTrusted: false
newHeight: 150
newWidth: 1080
path: Array[5]
returnValue: true
srcElement: webview
target: webview
timeStamp: 1453905541457
type: "resize"__proto__: Event
callee: onResize()
length: 1
Symbol(Symbol.iterator): values()
__proto__: Object
725
You've set the height of the webview to 100%, but didn't set an explicit height for the parent (in this case the body). Giving the body and explicit size should fix your problem:
body {
width: 100vw;
height: 100vh;
}
See also:
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
