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;
|
||||
|
||||
|
||||
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 [
|
||||
css`
|
||||
return css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
background: white;
|
||||
@ -89,8 +93,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
|
||||
margin-left: auto;
|
||||
order: 1;
|
||||
}
|
||||
`,
|
||||
];
|
||||
`;
|
||||
}
|
||||
|
||||
get properties()
|
||||
@ -188,16 +191,18 @@ export class Et2DialogOverlay extends SlotMixin(LitElement)
|
||||
render()
|
||||
{
|
||||
// This style is just for this dialog
|
||||
let style = html`
|
||||
<style>
|
||||
.overlay {
|
||||
${this.width ? "width: " + this.width + "px" : ""};
|
||||
${this.height ? "height: " + this.height + "px" : ""};
|
||||
}
|
||||
</style>`;
|
||||
let styles = [Et2DialogOverlay._styles];
|
||||
|
||||
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`
|
||||
${(this.width || this.height) ? style : ""}
|
||||
<style>${styles}</style>
|
||||
<div class="overlay">
|
||||
<div class="overlay__header">
|
||||
<h1 class="overlay__heading">
|
||||
|
Loading…
Reference in New Issue
Block a user