Webview autosize


#1

I made a simple application which uses webview, something like this:

<div class="header">Some header stuff</div>
<div class="pane"
    <webview id="foo" src="https://www.github.com/" autosize="on" ></webview>
</div>

While width works fine and does reside as I resize the window, webview’s height is set to 150px. I tried to set

minheight="200" maxheight="1000"

but no changes in height.
I can do standard jQuery trick by subscribing to window resize event and setting height as

$(window).height - $('header').height

but I thought autosize is intended to do this?


#2

You might want to have a look at this https://github.com/steelbrain/Brauser/blob/master/Assets/Styles/Base.css#L31


#3

I’ve tried to modify style properties in dev tools, but something overrides my “height: 100%” css property. And I can not understand what it is, because it is not in the devtool style panel where overrides are shown. Confused.

I have feeling that there is something special about size of webview, because “autosize” propery is passed into native code. Documentation doed not say how exactly size is calculated in “autosize” mode.
In fact, here is function responsible for seeting the size:
https://github.com/atom/electron/blob/master/atom/renderer/lib/web-view/web-view.coffee#L94
But I could not make breakpoint working there.


#4

Did you find a fix for this? I also have a webview section that is getting sized to 150px height for some reason.


#5

No, I never were able to make autosize working, so I just used dom window resize event to calculate and set size of webview element explicitly.


#6

I got it to work with a few changes:

First, set h/w = 100% on html and body.

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

Then set a min size for the webview element:

<webview src="http://www.github.com/" autosize="on" minwidth="600" minheight="800" ></webview>

#7

This issue is still a thing for me a month later, your fix does not work for me. I assume you meant to have width and height 100% in the webview’s css?

EDIT: FOUND IT. My resizing issues was caused by WebFrame.setZoomFactor


#8

What does that mean? I have an webview that is always restricted to 150px in height regardless of css or element styles :frowning:


#9

find a css workaround:

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

#10

If this is still a problem for anyone, I’ve found that setting the webview body’s CSS to 100% width and height fixes this problem.

body {
    width: 100vw;
    height: 100vh;
}

#11

Thank you It worked