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

[iwaldman]

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 

[DianaBirkelbach]

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%.

[iwaldman]

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 

[iwaldman]

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>

[cchannon]

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.

[iwaldman · Accepted solution]

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)
      }
    }
  })

[cchannon]

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.

[iwaldman]

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.