Chrome Web App webview height issue

Question

I'm new in Chrome Web App programming. I want a simple WebApp which is separated to my Chrome/Chromium (means no tab). It shall show a external website in the body.

So here is my configuration:

manifest.json

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 400,
      'height': 600
    }
  });
});

window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <webview style="width: 100%; height: 100%;" src="http://www.google.de"></webview>
  </body>
</html>

I excpected a window like this (it shows Chromium for demonstraiton): enter image description here

But I got these:

enter image description here

So the height in webview isn't correct. When I set the height to (for example) 192px, it's show the correct size. But 100% isn't working...

I'm not very [good at CSS](https://s3.amazonaws.com/firebelly/blog-posts/graphics/171/original/css_is_awesome.gif), but can you try setting the same style also to ``/``? (easier in a style file than inline) — Xan, Jan 28 '15 at 14:18
Hi @Xan that wasn't working. I have answered my question by myself now: http://stackoverflow.com/a/28209572/1231245 — StefMa, Jan 29 '15 at 12:13

StefMa · Accepted Answer · 2015-01-31T10:05:11.670

I've asked François Beaufort (Chromium engineer atm) on Google+. Hey replayed:

The chromium team uses window.onresize to recalculate webview width and height in this sample: https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js

After looking on these example I have the following Chrome App.

manifest.json:

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 1050,
      'height': 700
    }
  });
});

window.html

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <webview src='http://www.google.de' id="xx"></webview>
    <script src="main.js"></script>
  </body>
</html>

main.js (here is the magic :D)

function updateWebviews() {
  var webview = document.querySelector("webview");
  webview.style.height = document.documentElement.clientHeight + "px";
  webview.style.width = document.documentElement.clientWidth + "px";
};

onload = updateWebviews;
window.onresize = updateWebviews;

Now I have exactly what I want. A webview with fullscreen of a web page: enter image description here

Edit:

I've also uploaded a git repo on GitHub for see the SourceCode: https://github.com/StefMa/ChromeAppWebsite

score 6 · Answer 2 · answered Sep 16 '15 at 02:45

6

This works for me (within a style element in the HTML obviously):

webview {
   display: flex;
   height: 100vh;
}

answered Sep 16 '15 at 02:45

Benjineer

1,530
18
22

score 2 · Answer 3 · edited Jul 10 '15 at 07:32

2

This solution seems to work for me, it's not ideal, but works:

<webview src="https://github.com" style="width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></webview>

edited Jul 10 '15 at 07:32

MathieuF

3,130
5
31
34

answered Jul 09 '15 at 00:25

gtandiono

31
2

score 1 · Answer 4 · edited May 23 '17 at 11:53

1

This could happen because you are using relative height and width with <!DOCTYPE html>. See this answer for an explanation.

Instead of using 100%, you could try specifying the width and height in pixels.

<webview style="display:block; width:400px; height:600px;" src="http://www.google.de"></webview>

edited May 23 '17 at 11:53

Community

1
1

answered Jan 28 '15 at 21:01

Sarah Elan

2,465
1
23
45

It is working with specific pixels. But that wasn't what I want. – StefMa Jan 29 '15 at 12:12
1

@StefMa your answer is much better! – Sarah Elan Jan 29 '15 at 14:13

score 0 · Answer 5 · answered Dec 20 '15 at 21:20

0

Add this to styles.css

webview{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

answered Dec 20 '15 at 21:20

Edd Hakobyan

41
1
1
5

Chrome Web App webview height issue

5 Answers5

Linked