\
**Category:** Web\
**Created:** [July 7, 2020, 5:40am UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375 "2020-07-07T05:40:41Z")\
**Posts on this page:** 12\
**Page:** 1
**Author:**  [@houssam.hammoud](https://devforum.zoom.us/u/houssam.hammoud)\
**Post date:** [July 7, 2020, 5:40am UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/1 "2020-07-07T05:40:41Z")
Hello Team,
The SDK injects inline styles for the html and body elements:
html, body {
height: 100%;
width: 100%;
/\* min-height: 643px; \*/
min-width: 1100px;
overflow: hidden;
font-size: 16px;
padding: 0;
margin: 0;
font-family: “Open Sans”;
color: #4a4a4a;
}
These blanket styling changes block scrolling of the body, switch the font to Open Sans and set a color. I could modify my existing app to use more specific selectors, but this is not a good start, I don’t think an SDK should set these styles on a global element this way.
Further, the SDK uses fixed positioning for multiple elements ( `#zmmtg-root, .meeting-client` ) and sets the width via JS for other elements (like the `diaout-layer` for the audio choice dialog). And there is at least one DOM element with inline styles and no selector, which means it’s near impossible to override via CSS from the parent app.
Hopefully these issues can be addressed in the next iteration of the Web SDK to facilitate integrating inside another app. As it is, I think the SDK can only be used as a full screen element.
---
**Author:**  [@nvivot](https://devforum.zoom.us/u/nvivot)\
**Post date:** [July 7, 2020, 10:16am UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/2 "2020-07-07T10:16:16Z")
+1
That’s one (if not the only) reason why our integration used an iFrame…
Improving CSS integration would definitely help to move away from this.
---
**Author:**  [@daniel2](https://devforum.zoom.us/u/daniel2)\
**Post date:** [July 8, 2020, 4:28pm UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/3 "2020-07-08T16:28:21Z")
It’s less of an SDK, and more of a “let’s make your web app our Zoom client” instead
---
**Author:**  [@simonwong](https://devforum.zoom.us/u/simonwong)\
**Post date:** [July 8, 2020, 5:00pm UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/4 "2020-07-08T17:00:32Z")
I have this issue as well. The CSS and Bootstrap throws off the styling of my entire application. My temporary (perhaps permanent) solution is to fire up another node process so the web sdk is running independent of my main application.
---
**Author:**  [@daniel2](https://devforum.zoom.us/u/daniel2)\
**Post date:** [July 8, 2020, 5:05pm UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/5 "2020-07-08T17:05:49Z")
I sort of solved it by inserting some CSS reset specifically for the parent element selector for my app.
Something like:
`#my_app { font-family: ...; }`
That way, at least all the DOM within that node will get current styling. Miles away from optional, but at least it works.
---
**Author:**  [@houssam.hammoud](https://devforum.zoom.us/u/houssam.hammoud)\
**Post date:** [July 9, 2020, 6:51am UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/6 "2020-07-09T06:51:03Z")
@daniel2 yes I agree
---
**Author:**  [@houssam.hammoud](https://devforum.zoom.us/u/houssam.hammoud)\
**Post date:** [July 9, 2020, 6:51am UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/7 "2020-07-09T06:51:27Z")
@simonwong yes I believe this is the best solution
---
**Author:**  [@daniel2](https://devforum.zoom.us/u/daniel2)\
**Post date:** [July 9, 2020, 11:42am UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/8 "2020-07-09T11:42:59Z")
How have you solved the communication between the apps?
---
**Author:**  [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 13, 2020, 10:14pm UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/9 "2020-07-13T22:14:49Z")
Hey @daniel2, @nvivot, @houssam.hammoud, @simonwong,
Currently the best way to use the Web SDK without affecting the styling and functionality of your app is to navigate the user to a seperate path or sub domain so it does not interfere with your CSS. Then after the meeting you can navigate back to your main page with the [leaveUrl](https://zoom.github.io/sample-app-web/ZoomMtg.html#init)
Thanks,
Tommy
---
**Author:**  [@daniel2](https://devforum.zoom.us/u/daniel2)\
**Post date:** [July 14, 2020, 9:30am UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/10 "2020-07-14T09:30:08Z")
In my case I need the Zoom client on the same page. Custom UI is the solution to my problems I suppose, and 1.8.0.
---
**Author:**  [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 16, 2020, 7:31pm UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/11 "2020-07-16T19:31:12Z")
Thanks! 🙂
-Tommy
---
**Author:**  [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 10:44pm UTC](https://devforum.zoom.us/t/web-sdk-add-inline-styles-to-html-and-body/23375/12 "2020-08-21T22:44:16Z")
Closed on August 21, 2020, 10:44pm UTC