Styling Request on the SAC Weather Tools Page

[andyanderso]

I am trying to set the iframe height to dynamically adjust based on the window size. The page I am working on is https://www.sierraavalanchecenter.org/weather/weather-tools. I have this iframe embedded in the page.
<iframe frameborder="0" id="wxtable" scrolling="yes" src="https://looper.avalanche.state.co.us/sac/" style="width:95%; min-height: 1275px; "></iframe>

My goal is to:

• Never have the vertical scroll bar on the iframe - horizontal scrolling on mobile is fine and expected.
• Always show all of the content in the iframe
• Not have much white space on the page below the iframe

The iframe height must be taller on mobile than on desktop to achieve this.

If I set a fixed height, I can make it work, but then I either have a lot of whitespace below the iframe on desktop or vertical scrolling within the iframe on mobile.

I tried using the 100vh css property, but that creates a seemingly infinite height.

<div style="height: 100vh; display: flex; flex-direction: column;">
<iframe frameborder="0" id="wxtable" scrolling="yes" src="https://looper.avalanche.state.co.us/sac/" style="flex-grow: 1; border: none; width: 100%;"></iframe>
</div>

I also tried some JavaScript, but it seems like we can't use JavaScript in the generic embed?

<script type="text/javascript">
  function resizeIframe(iframe) {
    if (iframe.contentWindow && iframe.contentWindow.document.body) {
      // Calculate total height
      var height = iframe.contentWindow.document.body.scrollHeight;
      iframe.style.height = height + "px";
    }
  }


  // Call the function when the iframe loads
  document.getElementById('wxtable').onload = function() {
    resizeIframe(this);
  };
</script>

<script>
  window.addEventListener('message', function(event) {
    if (event.data.type === 'resize') {
      var iframe = document.querySelector('iframe');
      iframe.style.height = event.data.value + 'px';
    }
  }, false);
</script>

I am sure that @rchlfryn, @busbyk, and @stevekuznetsov have way better ideas than me for this!

Thanks

[rchlfryn]

@andyanderso just to confirm, is the height 'issue' only on mobile? It looks good on desktop but I do see the vertical scroll bar on mobile.

We don't allow scripts in the generic embed because we have no way to verify if they are malicious or not.

[andyanderso]

@rchlfryn, yes, the height issue is only on mobile. I have a fixed-height setting that works for most desktops (min-height: 1275px;)

Maybe I could use breakpoints and set a fixed mobile height that will work for most mobile displays.

I was hoping for a way to dynamically set the height to match whatever display height is for whatever screen people are using.

Thanks for all the work on this stuff!

[busbyk]

@rchlfryn, yes, the height issue is only on mobile. I have a fixed-height setting that works for most desktops (min-height: 1275px;)

Maybe I could use breakpoints and set a fixed mobile height that will work for most mobile displays.

I was hoping for a way to dynamically set the height to match whatever display height is for whatever screen people are using.

Thanks for all the work on this stuff!

Yea the issue is that the station names wrap on mobile, making that minimum height of 1275px too small to fit all of the content.

Who controls the source page (https://looper.avalanche.state.co.us/sac/)? Ideally, that page would include a resize script because including a script in our embeds won't be able to access that iframe's content height because it's on a different domain.

Using a media query is a great option for now though. You'd just want to determine the right height on mobile when the station names are wrapped. This seems to work well (a little extra whitespace but you can play with that):

<style>
  #wxtable {
    width: 95%;
    min-height: 1275px;
  }

  @media (max-width: 768px) {
    #wxtable {
      min-height: 2400px;
    }
  }
</style>

<iframe frameborder="0" id="wxtable" scrolling="yes" src="https://looper.avalanche.state.co.us/sac/"></iframe>

A few fyis:

• You might want to change the id if you want to include multiple wxtable iframes on the same page.
• You can include script tags in our embeds if you ever need to.
• Our embeds resize to fit their content. The reason this isn't happening in this case is because you have an iframe inside of an iframe. Like so (simplified version):

<iframe id="avyfxiframe">
  <iframe id="wxtable"></iframe>
</iframe>

<iframe id="avyfxiframe"> will resize to it's content. But <iframe id="wxtable"></iframe> needs an explicit height (like you're setting with the min-height style) or it's own script to receive messages to resize it (this requires the iframe's domain to post messages).

[andyanderso]

Thanks @busbyk - I went with the media breakpoints for now. We will see how much traffic that page actually gets before I do more.

[rchlfryn]

@andyanderso Going to close this for now, but feel free to reopen if needed