Dynamically adjust tiddler height based on loaded iframe height?

#1

I have a web site that is using TW5 as the front-end. The TiddlyWiki is delivered by the server. A subset of tiddlers contain simple iframe tags that href pages specifically designed to be displayed inside tiddlers.

The iframe JavaScript has access to all parent TW tiddlers and functions, since from the same domain (origin). The iframe width is simply 100% - but the height of the tiddlers containing the iframes is what I am having trouble with.

Technically, would like the tiddler to dynamically adjust it’s height based on the getComputedStyle(iframe).height

Some web pages are of a fixed height - so those are a none issue as can set the height of the iframe - the tiddler adjusts to that height. But some iframe heights vary based on the data content of the iframe.

Have tried various methods, searches for a solution have been futile - though sure has come up before, and probably simple solution. I could directly modify the tiddler DOM :frowning: - ugly and TW anti-pattern.

What is the TW5 way of dynamically adjust tiddler height based on the current height of the loaded iframe it contains?

#2

The height of tiddler is adjusted automatically by height of its content. I think the problem is with the height of the iframe not fitting its content.

#3

I am no expert in this area, but perhaps the height can be set to a “view window” parameter eg; 95vw which is 95% of he view window then add an overflow that allows scrolling to unveil more and a button to increase the height when desired.

But it would be of great value if as you suggest getComputedStyle(iframe).height was possible.

#4

Thanks for the suggestions,

Think that @Alvaro is correct. I didn’t think of testing the iframe tag in a regular flat web page :frowning: Which has the same behavior that is happening when in a tiddler.

Apparently, a height of ‘auto’ or a percentage does not resize the iframe element itself. So regardless if in a tiddler or not - ends up with a smallish height and with vertical scrollbar by default.

Will continue to work on it - going to do some testing with ‘onload’ of the iframe and see if can get it to size properly when used without TiddlyWiki. Once get that working will then try in a tiddler. Pretty sure will work fine.

Will keep posted with my results.

#5

isn’t the vanilla base css the cause for short iframes?

vanilla/base
.tc-tiddler-body > embed, .tc-tiddler-body > iframe { width: 100%; height: 600px; }

#6

One solution that works well is to add the following script to the web page that is being iframed:

<script>
  // Resize when onload in an iframe - see 'onload' below
  const resizeIframe = (elemId) => {
    if (!window.parent) return; // if not an iframe just return
    const frame = window.parent.document.getElementById(elemId);
    if (frame) frame.style.height =
      (frame.contentWindow.document.body.scrollHeight + 16) + 'px';
  }

  onload = () => {
    resizeIframe('settings-frame');
  }
</script>

The tiddler text:

<iframe src="/settings" width="100%" id="settings-frame" style="border: transparent;"></iframe>

The border being transparent seems to help hide the iframe scrollbar. Further testing may find a better method. Also note that the TiddlyWiki must be delivered by the server - thus giving the web page access to the ‘parent’ (ie: tiddler’s) iframe.

If interaction with the web page iframed in the tiddler changes the height of the page - resizeIframe() needs to be called to (re)resize the tiddler. By default my usage has the sidebar hidden. If reader unhides the sidebar - the iframe is not resized so a scrollbar will show up. Not a problem in my case.

Finally, the tiddler can display other content before/after the iframe which will be rendered as expected.

3 Likes