Auto adjust heigth of Google Site embed code (html)

Question

I am using Google Sites to embed HTML code, paste the code within the "Embed from the web" window. The length of the output is variable.

I wish there was a way to dynamically adjust the height of the parent iframe that Google Sites is using to host my HTML.

I know that I can use the Google Sites user interface to manually allocate more space and unfortunately the content is going to be different based on data from API, hence there is no way for me to know the height beforehand. Currently the vertical scroll-bar appears whenever the content overfills the allocated space and it does not look good.

I tried the following and it only removes the scroll bar without allowing me to see the content:

<script>parent.document.getElementsByTagName('iframe')[0].scrolling="no";</script>

The example Google Site is at https://sites.google.com/view/auto-ajust-gsite-embed/home

And this is the code I used in the above example site:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />

    <title>auto adjust google site embed</title>
  </head>
  <body>
    <div class="accordion accordion-flush" id="accordionFlushExample">
      <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#flush-collapseOne"
            aria-expanded="false"
            aria-controls="flush-collapseOne"
          >
            Accordion Item #1
          </button>
        </h2>
        <div
          id="flush-collapseOne"
          class="accordion-collapse collapse"
          aria-labelledby="flush-headingOne"
          data-bs-parent="#accordionFlushExample"
        >
          <div class="accordion-body">
            Placeholder content for this accordion, which is intended to
            demonstrate the <code>.accordion-flush</code> class. This is the
            first item's accordion body.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingTwo">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#flush-collapseTwo"
            aria-expanded="false"
            aria-controls="flush-collapseTwo"
          >
            Accordion Item #2
          </button>
        </h2>
        <div
          id="flush-collapseTwo"
          class="accordion-collapse collapse"
          aria-labelledby="flush-headingTwo"
          data-bs-parent="#accordionFlushExample"
        >
          <div class="accordion-body">
            Placeholder content for this accordion, which is intended to
            demonstrate the <code>.accordion-flush</code> class. This is the
            second item's accordion body. Let's imagine this being filled with
            some actual content.
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

score 0 · Answer 1 · answered Jan 25 '23 at 21:59

This is just a trick to have NEW google sites remove the vertical scrollbar: Expand the inserted "Embed < >" box's boundary. --[ Details: I expand the inserted "Embed < >" box's boundary to the size of about 11" x 7 ": horizontal to the max on the right side, vertical (down) to the end of the visible bottom to the monitor's screen. (I stop further downwardly expansion of said box because it moves very slowly starting from the bottom most of the screen). I think the box is large enough for my test. All tested views mobile/tablet/monitor show that the scrollbar is gone. ] --(Thank you for the HTML embed codes.)

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — shamnad sherief, Jan 27 '23 at 05:20

Auto adjust heigth of Google Site embed code (html)

1 Answers1

Linked