Vertically misaligned Inline Forge Macro off by a small amount css

Forge Forge UI Kit and Custom UI
,
1

Good day,

I have noticed a height discrepancy when my macro is rendered inline (manifest layout: inline) and placed within other text in a paragraph.

For example, in the following case, the macro content “THE MACRO CONTENT HERE” renders slightly lower than the preceding text, “TEXT BEFORE MACRO.” Here is the source code:

 <Fragment>
    <Text>THE MACRO CONTENT HERE</Text>
 </Fragment>

The rendered HTML:


 <p data-renderer-start-pos="1">TEXT BEFORE MACRO
    <span>
        <div class="inline-extension-renderer cc-yqgtfn">
            <div data-testid="ForgeExtensionContainer" class="cc-1muv2so">
                <div style="display: block; width: 100%; position: absolute;"></div>
                <div class="cc-cc1ibv"><p>THE MACRO CONTENT HERE</p></div>
                <div class="cc-1fqij2b" data-testid="hosted-resources-iframe-container">
                    <div class="cc-jz67ku">
                        <iframe data-testid="hosted-resources-iframe" data-forge-iframe="true" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-same-origin allow-scripts" allow="camera; clipboard-write; display-capture; fullscreen; microphone" src="http://localhost:8000/" class="cc-1oootbz"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </span>
</p>

This issue might be caused by the class cc-yqgtfn (generated css by Forge for the macro), has a margin and vertical-align value applied.

If I remove the following two styles—vertical-align: middle; and margin: 1px 1px var(--ds-space-050, 4px);—the problem is resolved.

CURRENT STYLE:

.cc-yqgtfn {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    margin: 1px 1px var(--ds-space-050, 4px);
}

WORKING STYLE:

.cc-yqgtfn {
display: inline-block;
max-width: 100%;
}

I wonder if the style can be reviewed for the Forge team to ensure inline forge rendered text remains aligned.

2

It is not only the forge issue, connected app have the same issue

3

Issues like this one are important for us as content for professional documents must be exported and shared.

1 Like