How to create a properly aligned dynamic inline macro?

I am trying to create a properly aligned dynamic inline macro in a Confluence Cloud app. Does this work at all at the moment? Is there a working example?

Since dynamic resizing sets the wrong width (as reported here, I have set data-options="resize:false" and am calling this code after rendering the macro:

const acContent = document.querySelector('.ac-content');
AP.resize(acContent.offsetWidth, acContent.offsetHeight);

I have set the styles font-size: 16px; line-height: 1.714 to match the font style of a regular Confluence page.

The problem is that the iframe is misaligned:

These are the dimensions of the iframe:

The problem is that no matter how high I make the iframe, it is always aligned above the baseline of the text. I can use line-height: 1 in combination with overflow: hidden to align it with the rest of the text, but then tall letters like j are cut off at the bottom (which makes j look like an i).

I cannot even imagine any use case for inline macros where this misalignment wouldn’t be a problem. Is there some trick to align the iframe? Or are inline macros simply something that is not properly supported in Confluence?

1 Like

1 Like