Answered

How to create a responsive iframe in a React (virtual) code component with Fluent UI

(0) Share

Report

Posted on by iwaldman

159

I am developing a React (virtual) code component with Fluent UI that is a simple container for an iframe. The iframe must be responsive to the available height and width i.e., grow and shrink.

I am thinking I could leverage the Fluent UI Stack control since it provides a flexbox abstraction and can apply flexbox properties on children.

Has anyone considered or solved this problem? I could use some guidance on how to proceed.

Thanks in advance, Irvin

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (7)

Answers (1)

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (1)

Report

Hi @iwaldman ,

I might be wrong, but I don't think the FluentUI Stack would apply to the Iframe children.

Fluent UI Stack is basically a "div".

The PCF gives you the div container. I would just try to set the iframe width and height to 100%.

Was this reply helpful? Yes No
iwaldman 159 on at

Like (0)

Report

Hi @DianaBirkelbach ,

Thank you for the reply.

Just setting the height to 100% isn't enough to be responsive. I believe it requires the parental elements to be probably styled and that is what I am struggling with. And, I am NOT a CSS whiz 😕

I will share some code later today that should shed some light on the challenge.

BTW I really appreciate your blog posts. Thank you for them.

Kind regards, Irvin

Was this reply helpful? Yes No
iwaldman 159 on at

Like (0)

Report
I was able to achieve this by traversing the parent and adjusting styles. Ugly...

const getClassNames = (isFullScreen: boolean = false): IClassNames => { return mergeStyleSets({ iframeContainer: [ { display: 'flex', flex: 1, height: '100%', width: '100%', overflow: 'hidden', }, isFullScreen ? { position: 'absolute', } : { position: 'relative', }, ], iframe: [ { display: 'flex', flex: 1, position: 'relative', height: '100%', width: '100%', border: 0, top: 'auto', left: 'auto', }, isFullScreen && { paddingBottom: '1em', }, ], miniExpand: { height: '16px', width: '16px', cursor: 'pointer', }, }) } // Adjust flex layout causing the contents to reflow const adjustFlexLayout = (div: HTMLElement): void => { let parent = div?.parentElement console.log(`*** adjustFlexLayout - parent = ${parent}`) while (parent?.id.indexOf('tab-section') === -1 && parent?.nodeName.indexOf('BODY') === -1) { parent.style.display = 'flex' parent.style.flex = '1' parent.style.height = '100%' parent = parent.parentElement } } <div ref={iframeContainerRef} className={getClassNames(isFullScreen).iframeContainer}> <iframe src={url} className={getClassNames(isFullScreen).iframe}></iframe> </div>

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (1)

Report

Stack can force your IFrame window to be responsive, but it can't force the individual elements in the hosted page to be responsive. If the site you are Iframing is not responsive, then the only thing you can do is force a "scale" on the IFrame which manually resizes it (https://stackoverflow.com/questions/11382473/resize-external-website-content-to-fit-iframe-width). If you need to accommodate multiple form factors, you can get the right factor from Context.Client obj.

Was this reply helpful? Yes No
Verified answer

iwaldman 159 on at

Like (0)

Report
I leverage useEffect to traverse the parental hierarchy up to the form tab and adjust the DOM. Not ideal but it is working.

Here's my final code

// Adjust flex layout causing the contents to reflow const adjustFlexLayout = React.useCallback((div: Element): void => { let parent = div?.parentElement while ( parent?.id.indexOf('qtx_tab_section_cart') === -1 && parent?.nodeName.indexOf('section') === -1 ) { parent.style.display = 'flex' parent.style.flex = '1' parent.style.height = '100%' parent = parent.parentElement } }, []) // Reset flex layout causing the contents to reflow const resetFlexLayout = React.useCallback((div: Element): void => { let parent = div?.parentElement if (parent?.style?.flexDirection) { parent.style.flexDirection = '' } while ( parent?.id.indexOf('qtx_tab_section_cart') === -1 && parent?.nodeName.indexOf('section') === -1 ) { parent.style.display = '' parent.style.flex = '' parent.style.height = '' parent = parent.parentElement } }, []) React.useEffect(() => { if (!loading && !error) { const iframeContainer = document.querySelector('div[class*="container-"]') if (iframeContainer) { isFullScreen ? resetFlexLayout(iframeContainer) : adjustFlexLayout(iframeContainer) } } })

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (0)

Report

That's going to mean a lot of re-rendering, so there will be a ton of overhead, but I don't have a better solution.

Was this reply helpful? Yes No
iwaldman 159 on at

Like (0)

Report

Unfortunately, yes. I had another idea but it requires me to fallback to a standard control. I will report back it the idea pans out. Thanks.

Was this reply helpful? Yes No