LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
I'm trying to scale my component using inner.style.transform = ``scale(${scale})`` to make sure the component fits inside the viewpoort if the viewpoort is smaller then the component. I do this when the viewpoort is resized and the first time the component is rendered. Specifically:
// Scaling function
scaling() {
// Get page wrapper
var outer = this.shadowRoot.getElementById("outer")
var inner = this.shadowRoot.getElementById("inner")
// Window width
var window_width = window.innerWidth
// Scale
var scale = Math.min(window_width/inner.offsetWidth,1.0)*this._zoom
// Scale page to fit
inner.style.transform = `scale(${scale})`
outer.style.height = `${inner.offsetHeight*scale}px`
}
This works when resizing the viewpoort but fails the first time the component is rendered. The component renders ontop or below other components. It looks as if inner.offsetHeight is incorrect and the component is not yet finished rendering. Am I doing something wrong or is there something wrong with updateComplete or firstUpdated?
I'm trying to scale my component using
inner.style.transform = ``scale(${scale})``
to make sure the component fits inside the viewpoort if the viewpoort is smaller then the component. I do this when the viewpoort is resized and the first time the component is rendered. Specifically:The scaling function is defined as followed:
This works when resizing the viewpoort but fails the first time the component is rendered. The component renders ontop or below other components. It looks as if
inner.offsetHeight
is incorrect and the component is not yet finished rendering. Am I doing something wrong or is there something wrong with updateComplete or firstUpdated?