Issue with filters on mobile

Ask the Community General Questions
1

Hi! Thanks so much for these updates. On my website: Events I have a calendar but when I hit the filters there is a ”button to apply the filters but I have to scroll to the bottom of the page. Not ideal as it’s a long scroll. Any ideas? Built using Framer.

2 Likes
3

Hi there and welcome to the Community, @Sheridan_Cobb :waving_hand:

The issue with the filter display on mobile occurs because of the iframes used on the Framer builder. To fix it, please try to reinstall the widget avoiding iframes.

You just need to add the code below to the Assets section. After pasting the code, you should press Ctrl+S to save the file:

import { useEffect } from "react"
import { addPropertyControls, ControlType } from "framer"

export default function ElfsightWidget(props) {
    const { widgetId } = props

    useEffect(() => {
        const platform = document.createElement("script")
        platform.src = "https://static.elfsight.com/platform/platform.js"
        platform.setAttribute("data-use-service-core", "")
        platform.setAttribute("defer", "")
        document.body.append(platform)

        return () => {
            platform.remove()
        }
    }, [])

    return (
        <div>
            <div className={widgetId} />
        </div>
    )
}

addPropertyControls(ElfsightWidget, {
    widgetId: { type: ControlType.String, title: "Widget ID" },
})

Then use the Drag&Drop to move the asset with the code. Finally, add the ID of your widget to the Widget ID section:

image
image1920×959 116 KB

Here is the video featuring all the steps:


Give it a try and let me know if it helped :slightly_smiling_face:

1 Like
4

I cannot figure out what I did wrong. See what I did here: https://drive.google.com/file/d/1Il5j4HUXN0hGcqc6UOmwl7GFcQRV9Rsj/view?usp=sharing It is like when I drop it into framer you cannot see it without going to the layers panel?

2 Likes
5

Hi there, @Sheridan_Cobb :waving_hand:

Could you please share access to your website’s backend following the steps described in this article - Providing Access to Your Framer Website - Elfsight Help Center?

Please let me know once the access is shared and our devs will gladly look into this for you :slightly_smiling_face:

1 Like
6

Done!

2 Likes
7

Thank you!

I’ve forwarded it to the devs and will update you once I have their response :wink:

1 Like
8

Hi there, @Sheridan_Cobb :waving_hand:

Thank you for waiting!

We’ve slightly adjusted the script, which resolved the issue on mobile:

import { useEffect } from "react"
import { addPropertyControls, ControlType } from "framer"

export default function ElfsightWidget(props) {
    const { widgetId } = props

    useEffect(() => {
        const platform = document.createElement("script")
        platform.src = "https://elfsightcdn.com/platform.js"
        platform.async = true
        document.body.append(platform)

        return () => {
            platform.remove()
        }
    }, [])

    return <div className={`elfsight-app-${widgetId}`} data-elfsight-app-lazy />
}

addPropertyControls(ElfsightWidget, {
    widgetId: { type: ControlType.String, title: "Widget ID" },
})

Please check your website and let me know if it looks fine on your end :slightly_smiling_face:

1 Like
9

It looks amazing. Thank you so much for the support!

2 Likes
10

It’s my pleasure!

Don’t hesitate to contact us again in case of any questions. We’ll be more than happy to help :wink: