Search code examples
javascripthtmlcssweb-componentlit-element

How do we paint a gist to its full height inside an iframe?

Trying to get the iframe rendering the gist within this fs-gist custom element in this demo to expand such that the entire gist shows.

The custom element fs-gist has the following host CSS defined:

  static styles = css`
    :host {
      display: block;
      width: 100%;
      height: 100%;
    }
  `;

And the iframe that the gist is rendered into has it's inline style defined like this:

style="width: 100%; height:100%;"

How can we get the gist to fill to its complete height?

The code that renders the gist inside the iframe looks like this:

  firstUpdated() {
    let fileName = (this.file) ? this.file : ''; 
    this.iframe.id = 'gist-' + this.gistID;
    
    let doc = (this.iframe.contentDocument || this.iframe.contentWindow) as Document;
      let content = `
        <html>
        <head>
          <base target="_parent">
        </head>
        <body onload="parent.document.getElementById('${this.iframe.id}')">
        <script type="text/javascript" src="https://gist.github.com/${this.gistID}.js?file=${fileName}"></script>
        </body>
      </html>
    `;
    doc!.open()
    doc!.write(content)
    doc!.close()
  }

And the iframe template looks like this:

  render() {
    return html`
      <iframe id="gist" type="text/javascript" frameborder="0" style="width: 100%; height:100%;"></iframe>
    `;
  }

This is the source code for the custom element fs-gist

Solution

  • Try this:

    <body style="height: 100vh;">
  <fs-gist gistID="fireflysemantics/054716730103cd205c39167054542f68">
  </fs-gist>
</body>

    Setting the height of the body to 100vh allows the fs-gist element to expand within it.

    Demo: https://stackblitz.com/edit/typescript-fs-gist-set-body-height-demo