forked from extern/egroupware
Dialog / button fixes
- Get dialog contents visible in Firefox Something in how Firefox parsed or inserted the style and children caused an error: Node.insertBefore: Child to insert before is not a child of this node which caused the dialog contents to be missing from the shadow DOM. This fixes the missing contents by putting the style in using a different way.
This commit is contained in:
parent
27580ff4d7
commit
13d1289910
@ -17,10 +17,14 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
|
|||||||
protected _dialog : Et2Dialog;
|
protected _dialog : Et2Dialog;
|
||||||
|
|
||||||
|
|
||||||
static get styles()
|
/**
|
||||||
|
* I don't know what's going on with styles here, but if we define Et2DialogOverlay.styles it breaks
|
||||||
|
* dialog display in Firefox.
|
||||||
|
* The styles are added in render(), which is bad from a performance standpoint, but good in that it works.
|
||||||
|
*/
|
||||||
|
static get _styles()
|
||||||
{
|
{
|
||||||
return [
|
return css`
|
||||||
css`
|
|
||||||
:host {
|
:host {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: white;
|
background: white;
|
||||||
@ -89,8 +93,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
`,
|
`;
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get properties()
|
get properties()
|
||||||
@ -188,16 +191,18 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
|
|||||||
render()
|
render()
|
||||||
{
|
{
|
||||||
// This style is just for this dialog
|
// This style is just for this dialog
|
||||||
let style = html`
|
let styles = [Et2DialogOverlay._styles];
|
||||||
<style>
|
|
||||||
.overlay {
|
|
||||||
${this.width ? "width: " + this.width + "px" : ""};
|
|
||||||
${this.height ? "height: " + this.height + "px" : ""};
|
|
||||||
}
|
|
||||||
</style>`;
|
|
||||||
|
|
||||||
|
if(this.width && Number.isInteger(this.width))
|
||||||
|
{
|
||||||
|
styles.push(css`.overlay {width: ${this.width}px}`);
|
||||||
|
}
|
||||||
|
if(this.height && Number.isInteger(this.height))
|
||||||
|
{
|
||||||
|
styles.push(css`.overlay {height: ${this.height}px}`);
|
||||||
|
}
|
||||||
return html`
|
return html`
|
||||||
${(this.width || this.height) ? style : ""}
|
<style>${styles}</style>
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<div class="overlay__header">
|
<div class="overlay__header">
|
||||||
<h1 class="overlay__heading">
|
<h1 class="overlay__heading">
|
||||||
|
Loading…
Reference in New Issue
Block a user