Can we remove the scroll that is seen after embedding the visual to our application

Question & Answer
,
1

When the visual is embedded to our react application,into the iframe, scrollbar is shown. Tried with adjusting the height and width and also tried by setting scrolling=”no” within the frameOptions but still scroll is seen.

2

Hi @akhila, welcome to the QuickSight Community, there are several options from CSS, JS to SDK. Let’s try this option at the SDK level, ScrollBarOptions=HIDDEN.

 const frameOptions = {
                    url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                    container: '#experience-container',
                    height: "700px",
                    width: "1000px",
                    onChange: (changeEvent, metadata) => {
                        switch (changeEvent.eventName) {
                            case 'FRAME_MOUNTED': {
                                console.log("Do something when the experience frame is mounted.");
                                break;
                            }
                            case 'FRAME_LOADED': {
                                console.log("Do something when the experience frame is loaded.");
                                break;
                            }
                        }
                    },
                };

Another option at the JS level, would be to setup height to autofit:

Next, try this option at the CSS level:

body {
    overflow: hidden;
}

If using CSS/JS, please make sure to test for browser/mobile compatibility – the scrollbar syntax can differ.

We hope this solution worked for you. Let us know if this is resolved. And if it is, please help the community by marking this answer as a “Solution.” (click the check box under the reply)

3

Hi @akhila.john,
It’s been awhile since we last heard from you. Were you able to try the above suggestion provided by Xclipse or are you in need of additional assistance?

If we do not hear back within the next 3 business days, I’ll go ahead and mark the solution.

Thank you!