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

Merge pull request #5157 from christoth/master

Browse source 
webview: add CSS styling notes to doc
This commit is contained in:
Cheng Zhao 2016-04-15 19:58:54 +09:00
commit 9574f79d0f
1 changed files with 30 additions and 5 deletions
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: