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

fix: use flexbox to style webview (backport: 3-0-x) (#14408)

Browse source 
* fix: use flexbox to style webview

* docs: remove notes on browserplugin based webview
This commit is contained in:
trop[bot] 2018-08-31 14:48:08 -07:00 committed by Shelley Vohr
parent a341ae450a
commit 2e479ff799
2 changed files with 4 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/api/webview-tag.md
View file

@ -65,30 +65,11 @@ and displays a "loading..." message during the load time:
## CSS Styling Notes ## CSS Styling Notes
Please note that the `webview` tag's style uses `display:flex;` internally to 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` ensure the child `iframe` element fills the full height and width of its `webview`
container when used with traditional and flexbox layouts (since v0.36.11). Please container when used with traditional and flexbox layouts. Please do not
do not overwrite the default `display:flex;` CSS property, unless specifying overwrite the default `display:flex;` CSS property, unless specifying
`display:inline-flex;` for inline layout. `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. The recommended approach is to hide the `webview` using
`visibility: hidden`.
```html
<style>
webview {
display:inline-flex;
width:640px;
height:480px;
}
webview.hide {
visibility: hidden;
}
</style>
```
## Tag Attributes ## Tag Attributes
The `webview` tag has the following attributes: The `webview` tag has the following attributes:

3
lib/renderer/web-view/web-view.js
View file

@ -61,8 +61,7 @@ class WebViewImpl {
createInternalElement () { createInternalElement () {
const iframeElement = document.createElement('iframe') const iframeElement = document.createElement('iframe')
iframeElement.style.width = '100%' iframeElement.style.flex = '1 1 auto'
iframeElement.style.height = '100%'
iframeElement.style.border = '0' iframeElement.style.border = '0'
v8Util.setHiddenValue(iframeElement, 'internal', this) v8Util.setHiddenValue(iframeElement, 'internal', this)
return iframeElement return iframeElement