CODEWITHSUNDEEP
javascriptelectron
bigtunacan
bigtunacan

Reputation: 4986

How to make Electron WebView fill specified size?

I've tried adding an Electron WebView to a basic app and set minwidth and minheight on it as shown below. When it loads though it always ends up as 784px X 150px

<webview id="webpage" src="https://www.duckduckgo.com/" autosize="on" minwidth="800px" minheight="1200px"></webview>

Upvotes: 9

Views: 15407

Answers (2)

Emerson Barcellos
Emerson Barcellos

Reputation: 161

Try this:

<div style="width:100%; height:100%">
    <webview src="https://www.google.com/" autosize="on" style="min-width:900px; min-height:1200px"></webview>
</div>

Upvotes: 0

Nabzi
Nabzi

Reputation: 2101

This is an issue other people have reported too. Here in atom discussion webview autosize.

It seems that 'autosize' doesn't say the last word about the resulting window size; css parameters may interfere and change the result.

There are some css workarounds proposed for this issue that may help:

Set html and body width to 100%:

html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

Set viewport relative units in webview css:

webview {
  display: block;   /* iframes are inline by default */
  border: none;     /* Reset default border */
  height: 80vh;     /* Viewport-relative units */
  width: 95vw;
}

Upvotes: 9

Related Questions