mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

webview: add CSS styling notes

Browse source 
Create a new section for CSS and add notes to avoid hiding the webview via hidden or display:none; and provide a recommended approach.
This commit is contained in:
christoth 2016-04-14 10:29:55 -04:00
parent 1379e4f2dc
commit 4708477f5a
1 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
docs/api/web-view-tag.md
View file

@ -20,11 +20,6 @@ control the appearance of the `webview` container:
```html ```html
<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview> <webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
``` ```
Please note that the `webview` tag's style uses `display:flex;` internally to
ensure the child `object` element fills the full height and width of its `webview`
container when used with traditional and flexbox layouts (since v0.36.11). Please
do not overwrite the default `display:flex;` CSS property, unless specifying
`display:inline-flex;` for inline layout.
If you want to control the guest content in any way, you can write JavaScript If you want to control the guest content in any way, you can write JavaScript
that listens for `webview` events and responds to those events using the that listens for `webview` events and responds to those events using the
@ -50,6 +45,36 @@ and displays a "loading..." message during the load time:
</script> </script>
``` ```
## CSS Styling Notes
Please note that the `webview` tag's style uses `display:flex;` internally to
ensure the child `object` element fills the full height and width of its `webview`
container when used with traditional and flexbox layouts (since v0.36.11). Please
do not overwrite the default `display:flex;` CSS property, unless specifying
`display:inline-flex;` for inline layout.
`webview` has issues being hidden using the `hidden` attribute or using `display: none;`.
It can cause unusual rendering behaviour within its child `browserplugin` object
and the web page is reloaded, when the `webview` is un-hidden, as opposed to just
becoming visible again. The recommended approach is to hide the `webview` using
CSS by zeroing the `width` & `height` and allowing the element to shrink to the 0px
dimensions via `flex`.
```html
<style>
webview {
display:inline-flex;
width:640px;
height:480px;
}
webview.hide {
flex: 0 1;
width: 0px;
height: 0px;
}
</style>
```
## Tag Attributes ## Tag Attributes
The `webview` tag has the following attributes: The `webview` tag has the following attributes: