# Icons Layout issues in Web Browser integration

**URL:** <https://devforum.zoom.us/t/icons-layout-issues-in-web-browser-integration/15194>\
**Category:** API and Webhooks\
**Created:** [April 28, 2020, 8:04am UTC](https://devforum.zoom.us/t/icons-layout-issues-in-web-browser-integration/15194 "2020-04-28T08:04:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![invistart](https://avatars.discourse-cdn.com/v4/letter/i/7c8e57/32.png) [@invistart](https://devforum.zoom.us/u/invistart)\
**Post date:** [April 28, 2020, 8:04am UTC](https://devforum.zoom.us/t/icons-layout-issues-in-web-browser-integration/15194/1 "2020-04-28T08:04:28Z")

</div>

Basically the Icons Layout shows up broken, piling up the icons and therefore making them mostly unusable.

Using ZOOM Api for web over PHP/JS-JQuery/HTML5/CSS3 architecture

Dependencies are loaded as indicated in the documentation:

```
<!-- import ZoomMtg dependencies -->
<script src="https://source.zoom.us/1.7.6/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/lodash.min.js"></script>

```

Zoom is called from index.js as indicated:

```
    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.6/lib', '/av');

      ZoomMtg.preLoadWasm();

      ZoomMtg.prepareJssdk();

```

Then the room is initialized like this:

```
ZoomMtg.init({
      leaveUrl: 'https://xxxx', //obfuscated for publishing in the forums, real url in the true code
      isSupportAV: true,
      success: function () {
          ZoomMtg.join(
              {
                  meetingNumber: meetingNumber,
                  userName: userName,
                  signature: signature2,
                  apiKey: API_KEY,
                  userEmail: '',
                  passWord:,
                  success: function(res){
                      console.log('join meeting success');
                  },
                  error: function(res) {
                      console.log(res);
                  }
              }
          );
      },
      error: function(res) {
          console.log(res);
      }

```

Tested both over MacOS Catalina and Windows 10, with Chrome, Safari and Edge browsers (Chrome in both OS).

To make it even weirder, when I manually resize the Chrome browser to around 1000x600 icons rearrange (responsiveness works properly) and shows icons and options more reasonably.

Here are some screencaptures of the issue (icons at the bottom):

 ![errores_layout_iconos_zoom_embebido.001](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/d/d90af113d09c889370dd3ff0caae1adef6d6fa88.jpeg) ![errores_layout_iconos_zoom_embebido.002](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/0/050a2f80f457ab0b2502ae1e804126c4c4762e2c.jpeg) ![errores_layout_iconos_zoom_embebido.003](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/4/468fd5606ecfaf946f680f4a509e4218db54ef1d.jpeg) ![errores_layout_iconos_zoom_embebido.004](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/3/3bba5aa1c55e08526f2821fb40e39be6e93191a9.jpeg)

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 4, 2020, 3:02am UTC](https://devforum.zoom.us/t/icons-layout-issues-in-web-browser-integration/15194/2 "2020-05-04T03:02:47Z")

</div>

Hey @invistart,

Are you importing the Zoom Web SDK CSS styles?

> **[Integrate SDK - Getting Started - Web - Native SDKs - Zoom Software...](https://marketplace.zoom.us/docs/sdk/native-sdks/web/getting-started/integrate#cdn)**
>
> Integrate SDK
> 
> The Web SDK can be imported locally into an existing Node.js app through an npm package, or into any HTML5 project through a CDN (content...

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![DeveloperBot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/developerbot/32/12632_2.png) [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 9:01pm UTC](https://devforum.zoom.us/t/icons-layout-issues-in-web-browser-integration/15194/3 "2020-08-21T21:01:36Z")

</div>