Inline macros using Custom UI in Forge don’t resize dynamically

Forge Forge UI Kit and Custom UI
,
1

Hi All,

I’m building a Forge app that renders Custom UI content in Confluence via an inline macro.

According to the macro documentation:

‘inline’ shows the element inline with existing text. For UI Kit apps, inline macros dynamically resize to wrap the content. A limitation exists for Custom UI apps that prevents inline macros from dynamically resizing when the content of the macro is changed.

That’s exactly what I’m seeing, the iframe size seems to be locked at the initial render. This causes issues like:

  • Short content - the iframe gets sized very narrowly, leaving visible gaps in the text flow.

  • Long content - iframe doesn’t expand, so content can be clipped.

In Connect we had AP.resize() to deal with this, but I don’t see an equivalent for Forge.

Has anyone else worked around this?

  • Is there any way to re-trigger sizing for inline content?

  • Or is pre-measuring / setting a fixed width the only current option?

Thanks in advance!

Sue

1 Like
2

One step back from the component:

How does Forge determin the initial size of the component. Or a inline custom-ui Confluence macro?
At some point Forge needs to take a measurement of the iframte and determine the size of it to then fix it.

So that we can ensure the layout/render code completes before Forge takes a measurement.

3

It seems to apply the sizing very early when it loads the macro. The problem is especially visible in Firefox and Safari, while Chrome is more forgiving and most times it is able to adjust itself and show correctly.

As a workaround, I found that adding a style tag to the html file of the custom UI app helps to force the Forge iframe to size correctly for inline macros. It will not work if you apply to the app itself. It has to target the html and body in order to display correctly in all browsers.

<style>
    html, body {
        margin: 0;
        padding: 0;
        width: max-content;
        vertical-align: middle;
    }
</style>

I hope this is helpful for others experiencing this same limitation.