existing html element, setContainer work well for paraview, no sucess for vtk.js as client.

  • I have a html element, <div #imageDiv id=“imageDiv”>

  • I obtained the native element, and want to pass it as container for remote view in client side

@ViewChild(‘imageDiv’) imageDiv!: ElementRef;
let div = this.imageDiv.nativeElement;

  • Using paraview, it works perfect, the image render at correct location and expected size:

      smartConnect.onConnectionReady((connection) => {
        const session = connection.getSession();
        const pvwClient = ParaViewWebClient.createClient(connection, [
        const renderer = new RemoteRenderer(pvwClient);
        this.session = session
        this.renderer = renderer
        renderer.onImageReady(() => {
          console.log('We are good');
  • but when using vtk.js as client for remote rendering, I pass same element as container, the rendered image take the entire screen not the size defined for the

    element. ( how ever, if I create the element using document.createElement(‘div’), the rendered image follow the size )

    .then((validClient) => {
      const viewStream = clientToConnect.getImageStream().createViewStream('-1');
      const view = vtkRemoteView.newInstance({
        rpcWheelEvent: 'viewport.mouse.zoom.wheel',
      const session = validClient.getConnection().getSession();
      this.session = session;
      view.setInteractiveRatio(0.7); // the scaled image compared to the clients view resolution
      view.setInteractiveQuality(50); // jpeg quality
      window.addEventListener('resize', view.resize);
    .catch((error) => {

Any help will be appreciated.

For vtk client, if I try view.getContainer, The container was passed sucessfully with and heigh = 450, that I defined.

But after rendered, it occupied entire screen:

Let me do some update, if I create new element, and append to existing element, then the render window honor the size I give, don’t know why, but it serve my purpose.

  const divRenderer = document.createElement('div');
  divRenderer.style.position = 'relative';
   divRenderer.style.width = '450px';
  divRenderer.style.height = '450px';
  divRenderer.style.overflow = 'hidden';

Don’t understand why directly set containter use existing element doesn’t honor the size. Is that designed behavior.

The injected <img> element is designed to fill its containing block (with position: absolute). You should add the CSS position: relative to #imageDiv for it to honor the size, just like you did with your child element solution.

thanks, a lot. That worked.