Web Component 2.1.1 only renders tiny box and does not conform to any Layout Styling due to Draggable behavior

Description
Regarding use of the @zoomus/websdk/embedded Embedded Component version “^2.1.1”

My team is working on integrating the Web Component View into our application.

We were very excited to see the Docs say “The Component View provides the option to display the Web Meeting SDK in components on your page. This allows for a more flexible design.”, but have so far had trouble altering any visual aspect of the Web Component. The Web Component seems to be completely inflexible in 3 visual areas that kind of cripple the experience:

  1. There is no way to style the actual size of the Zoom Component! The Web Component renders very small of the screen (244pixel wide) and ignores the size of the parent element specified within the zoomClient.init() function. Changing the size of the #zoomSdk Container element doesn’t affect the size of the meeting window, and there is no mention anywhere in the Component View docs about how to apply custom styles to the component. I’d expect at the least for it to be very clear on how to control the size of the overall Zoom meeting, and all of the inline style edits I’ve made within Chrome Devtools (which override all style definitions) do nothing to enlarge the Component.

  2. The SDK injects a style tag that positions the sdk-container Element in the top right of the page with an absolute position: style="display: flex; position: absolute; top: 8px; right: 8px;". Since this is injected into the html as an attribute, there is no way to override the style without adding !important flags to the CSS targeting the Container; that should not be the case for a Component that is advertised as “flexible design”.

  3. The Component view is wrapped in React-Draggable (I can see from its HTML class attribute) and therefore can be repositioned within the Webpage to the end-user’s like, but there is not opt-in or opt-out for this functionality. My team is building a Video call experience with a very specific layout design; having the Component view be a draggable component is not mentioned anywhere in the documentation and in my opinion is not a desireable UI for many teams that want to fix the Zoom component somewhere on the screen. Is there any config exposed by the package to disable this draggable behavior?

I’m not trying to sound overly critical, but it was an unpleasant surprise to say the least that after a few hours of trying to get everything configured, we are stuck with a tiny little Zoom window that is draggable around the page and doesn’t obey any layout or sizing style rules specified by the parent application. My questions that are not covered in the docs (to my knowledge) are the follow:

  1. Are there any recommended methods or configuration for altering the position, size and general styling for the Web Component? I see nothing in the docs beyond the toolbar button config within the customize object of the client.init() function.
  2. Is there any way to disable the draggable behavior of the Component?

If I’m mistake, please direct me in the right direction or documentation that I may have missed.

Browser Console Error
The full error message or issue you are running into.

Which Web Meeting SDK version?
“^2.1.1”

Meeting SDK Code Snippets
The code snippets that are causing the error / issue so we can reproduce.

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Install the latest @zoom/websdk ("^2.1.1") package to any frontend repo
  2. Initialize the client and join a meeting
  3. Attempt to make style changes to the Component (either by CSS !mportant flags, inline style attributes) to change its size on the page

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

  • Device: Macbook Pro 2020 M1
  • OS: Latest Mac OS
  • Browser: Latest Firefox and Chrome

Additional context
Add any other context about the problem here.

@tommy I apologize for pinging you directly, but I’ve read a bunch of your answers around here and thought you might be a good person to contact. Could you take a look at my ticket and let me know if you’re aware of any of these issues/if they actually aren’t issues could you point me in the right direction for styling/changing the size of the Web Component SDK

Hey @morrow_nav

Thanks for your feedback. We are aware of the limited experience of Component View.

We are planning to roll out a version of Component View in Jan. 2022, which includes disableDraggable and style-related attributes. Please stay tuned.

Thanks
Vic

@vic.yang

Hi.
Where can I sign up for the notification on this? (possibly new release notifications?)
Now our team is kind of on the border where we decide we wait for this feature or we go another way so looking forward to hear any updates!

@hiro.hokari.0722 Unfortunately, we don’t have a method to subscribe to updates right now but this is something our team is looking to add in the near future.

The latest version does seem to allow us to disable the dragabble. However, I am still not seeing anyway to resize the window or just let it fill it’s parent container (which is the ideal design in my opinion). Let me know if I am missing something in version 2.2.0 that allows us to easily resize the window.

Hey @mikew

In Web SDK, we expose disableDraggable option in init method, you can refer to the document for the detail.

Thanks
Vic

Yes. To clear things up, I was able to disable draggable. I am UNABLE to easily resize things though. Right now I am overriding a bunch of random (generated) css classes to accomplish this. I suspect this will break in the future if anything changes.

My main question is: Is there a supported way to make the zoom window fill the parent’s container?

Hey @mikew ,

Resizing is coming soon in the next release! :slight_smile:

Here are some instructions on how to position the components:


Positioning


Web Meeting SDK Component View 2.2.0+ now has positioning capabilities. Each component can be placed in a specific area on your page. Dragging a component can also be disabled.

Positioning components

In the init() function’s customize property, you can configure positioning, dragging, and for the components.

For example, if you wanted to position the video component on the left and chat component on the right, and disable dragging for both, you can use the following approach:

let meetingSDKElement = document.getElementById('meetingSDKElement');

let meetingSDKChatElement = document.getElementById('meetingSDKChatElement');

client.init({
  zoomAppRoot: meetingSDKElement,
  language: 'en-US',
  customize: {
    video: {
      popper: {
        disableDraggable: true
      }
    },
    chat: {
      popper: {
        disableDraggable: true,
        anchorElement: meetingSDKChatElement,
        placement: "top"
      },
    }
  }
});
<div class="row">
  <div class="column">
    <h3>Videos Here</h3>
    <div id="meetingSDKElement"></div>
  </div>
  <div class="column">
    <h3>My Content Here</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="column">
    <h3>Chat Here</h3>
    <div id="meetingSDKChatElement"></div>
  </div>
</div>
.row {
  display: flex;
}

.column {
  flex: 1;
  position: relative;
}

#meetingSDKElement {
  top: 59px !important;
  left: 0 !important;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 244px; /* width of speaker and ribbon view */
}

Since the SDK Root Element (zoomAppRoot) works differently then child components, the videopopper object: anchorElement, modifiers, placement, and anchorReference properties are not available, however, you can still position the root element via CSS as shown above. This will be improved in a future release.

For more info, please see the full Web Meeting SDK Component View API Reference.


Thanks,
Tommy

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.