Problem with Focus Item (Modal - Popup) on Mobile - is not fully loaded

[kenzi]

Your software
My Mautic version is:
My PHP version is: 8.2

Your problem
My problem is:
I have created Focus Item → Modal (Popup) that contains just an clickable image. The problem is when I visit a page on mobile device - the popup doesnt fully load on page. It loads like it was set to 10px height, and sometimes when I scroll up it loads with full size.

Does anyone else had this problem before and fixed it?

Here is an example how the focus item displays when I visit the page on mobile:

[kenzi]

I see that there is an error in console:
Uncaught TypeError: Cannot read properties of undefined (reading ‘style’)

and the problem is with this code:

            enableIframeResizer: function() {
                if (typeof Focus.iframeResizerEnabled !== 'undefined') {
                    return !0
                }
                Focus.iframeHeight = 0;
                Focus.iframeWidth = 0;
                Focus.iframeResizeInterval = setInterval(function() {
                    if (Focus.iframeHeight !== Focus.iframe.style.height) {
                        var useHeight = ((window.innerHeight < Focus.iframeFocus.offsetHeight) ? window.innerHeight : Focus.iframeFocus.offsetHeight);
                        useHeight += 10;
                        useHeight = useHeight + 'px';
                        if (Focus.debug) {
                            console.log('window inner height = ' + window.innerHeight);
                            console.log('iframe offset height = ' + Focus.iframeFocus.offsetHeight);
                            console.log('iframe height set to ' + useHeight)
                        }
                        Focus.iframe.style.height = useHeight;
                        Focus.iframeHeight = useHeight
                    }
                    if (Focus.iframeWidth !== Focus.iframe.style.width) {
                        if (Focus.debug) {
                            console.log('window inner width = ' + window.innerWidth);
                            console.log('iframe offset width = ' + Focus.iframeFocus.offsetWidth)
                        }
                        if (window.innerWidth < Focus.iframeFocus.offsetWidth) {
                            Focus.addClass(Focus.iframeFocus, 'mf-responsive');
                            Focus.addClass(Focus.iframe, 'mf-responsive');
                            Focus.iframe.style.width = window.innerWidth + 'px';
                            Focus.iframe.width = window.innerWidth;
                            if (Focus.debug)
                                console.log('iframe set to responsive width: ');
                        } else {
                            Focus.iframe.style.width = Focus.iframeFocus.offsetWidth + 'px';
                            Focus.iframe.width = Focus.iframeFocus.offsetWidth + 'px';
                            Focus.removeClass(Focus.iframeFocus, 'mf-responsive');
                            Focus.removeClass(Focus.iframe, 'mf-responsive');
                            if (Focus.debug)
                                console.log('iframe not a responsive width');
                        }
                        Focus.iframeWidth = Focus.iframe.style.width
                    }
                }, 35);
                Focus.iframeResizerEnabled = !0;
                return !0
            },

[kenzi]

Because I cannot update my post, here is more details about this modal:

<div style="object-fit: contain;object-position: center;">
    <a href="https://domain.com/dni-otwarte" target="_blank">
        <img style="max-width: 100%;display: block;" src="https://domain.com/media/images/popup/dzien-otwarty-post-OGOLNY-7.png" alt="Dni Otwarte" />
    </a>
</div>

and the styles:
.mf-modal{background:transparent;padding:0;border:0;}.mf-content{margin-bottom:0 !important;}.mf-modal-close{top:0 !important;right:0 !important;background:#fff;width:24px;}

[ricfreire]

Hello @kenzi
Whats your Mautic version? That’s essential.

[kenzi]

Hey hey, Mautic version - 5.1

[ricfreire]

Hello again,

The console error Uncaught TypeError: Cannot read properties of undefined (reading 'style') means that the script is trying to access the style property of an element that may not be properly defined or initialized. This could be caused by several factors, possibly related to your CMS:

• CMS restrictions: Check if your CMS is blocking external iframes or if a security plugin/tool is preventing external scripts from loading.
• Plugin conflicts: If your CMS has multiple plugins, try disabling them one by one to see if any are interfering with the Focus Item.
• Script modifications: Did you copy the script exactly as provided, or did you make any modifications? If so, ensure that no critical elements were removed or altered.

To further diagnose the issue:

• Instead of adding CSS under the “Custom CSS” section, try placing it directly within <style> tags inside the “HTML” section.
• Ensure that the Focus Item is correctly configured in Mautic.
• Test the Focus Item on a clean test environment (e.g., a simple HTML page or Clean CMS or security/tools plugins) to see if the issue continues.

Hope this helps. Let me know if it works.
Best regards,
Ricardo

[kenzi]

This is the same message that AI responded to my question ;(

[ricfreire]

1. AI has limited knowledge regarding Mautic and its tools, as not everything is documented. What you’re saying is categorically false.
2. If you believe my response was AI-generated, feel free to ask AI the same question and compare the results. This will only confirm my point.
3. Have you actually tested the solutions I suggested, or are you relying on AI to magically solve everything for you? Troubleshooting requires effort.
4. When someone takes time - especially on a weekend - to help you, a more respectful and appreciative attitude would be expected. The community thrives on mutual respect.
5. If you’re not interested in genuine help, I wont waste my time further.

[kenzi]

No no no, sorry mate. If you misconstrue my tone. I apologize. I didn’t mean to offend you. I was just saying that AI also gave mi similar answer as you did.

The problem is that this image is widther than the original focus modal item in Mautic. For example below is an example without any custom CSS code:

and it also doesnt fully load on mobile. It also generates the error as above.

I have also tried to add custom code CSS into style statements - didnt help.

the problem is with this line of code:
if (Focus.iframeHeight !== Focus.iframe.style.height) {

so it cannot calculate the height of the popup iframe - which is simple image.

[ricfreire]

Hello @kenzi,

I apologize for misinterpreting your message earlier. Regarding your situation, there’s actually a straightforward solution since you’re familiar with CSS and HTML.

I recommend editing the image to remove the text and logo while keeping the visual elements. Then apply it as a background for the focus item in Mautic. You can add the text directly within Mautic, utilizing custom fonts by calling them with HTML, and incorporate the logo next image - always respecting the iFrame size.

I’ve implemented a similar approach previously and it worked flawlessly.

Best regards,
Ricardo