The screen cannot scroll after importing ZoomMtg

[yuhaoh]

Description
I used Angular 8 for my website, it worked fine without ZoomMtg. But after importing ZoomMtg, the website failed to scroll while all the buttons shown were clickable (so not frozen). I followed the tutorial and included codes in style.css and angular.json files, but I think Zoom SDK’s boostrap.css file overrode my style (Loading animation was not working and font changed as well).

Error
No error messages.

Which version?
“@zoomus/websdk”: “^1.8.5”,
Angular CLI: 8.2.2
Node: 12.16.2
OS: darwin x64
Angular: 8.2.14

[MaxM]

Hey @yuhaoh,

Thank you for reaching out to the Zoom Developer Forum. It definitely sounds like the Web SDK CSS is overriding your custom CSS. Have you tried adjusting the order that CSS is imported to your application? If you import your custom CSS last, that will make sure that it takes precedence over previously defined rules.

I hope that helps!

Thanks,
Max

[yuhaoh]

Hi Max,

Thank you for your reply. I can have my styles working properly now, but the page is still unscrollable when I import ZoomMtg. I have my code as:

import { ZoomMtg } from ‘@zoomus/websdk’;

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Could you please tell me what caused that?

Thanks!

[MaxM]

Hey @yuhaoh,

Thank you for providing additional information. Looking at the code snippet there, I’m not able to determine what the issue would be. Are you able to share a public git repo that I can use to reproduce the issue?

Thanks,
Max

[yuhaoh]

Hi Max,

I figured out the problem. It is caused by the zoom style overriding my custom css as you mentioned. The overflow is set to hidden when I get to the page where zoom sdk is imported, so the page cannot scroll.

Thank you so much for your time.

[tommy]

Hey @yuhaoh,

Happy to hear you got it sorted out!

Let us know if you have any other questions!

Thanks,
Tommy