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

**URL:** https://discourse.vtk.org/t/existing-html-element-setcontainer-work-well-for-paraview-no-sucess-for-vtk-js-as-client/11987
**Category:** Web
**Created:** [July 19, 2023, 10:07pm UTC](https://discourse.vtk.org/t/existing-html-element-setcontainer-work-well-for-paraview-no-sucess-for-vtk-js-as-client/11987 "2023-07-19T22:07:06Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![baoyun](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/b/4bbf92/32.png) [@baoyun](https://discourse.vtk.org/u/baoyun)
#### Post date: [July 19, 2023, 10:07pm UTC](https://discourse.vtk.org/t/existing-html-element-setcontainer-work-well-for-paraview-no-sucess-for-vtk-js-as-client/11987/1 "2023-07-19T22:07:07Z")

</div>

- 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:

- 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 

Any help will be appreciated.

---

<div class="post-metadata">

### Author: ![baoyun](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/b/4bbf92/32.png) [@baoyun](https://discourse.vtk.org/u/baoyun)
#### Post date: [July 19, 2023, 10:25pm UTC](https://discourse.vtk.org/t/existing-html-element-setcontainer-work-well-for-paraview-no-sucess-for-vtk-js-as-client/11987/2 "2023-07-19T22:25:52Z")

</div>

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

 ![image](https://discourse.vtk.org/uploads/default/original/2X/3/38fd19a4464a42e7f4a4fad38b5f211f18605c1c.png)

But after rendered, it occupied entire screen:

 ![image](https://discourse.vtk.org/uploads/default/original/2X/8/879567681bbc9b2f4b95ecd40779aa35d1385343.png)

---

<div class="post-metadata">

### Author: ![baoyun](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/b/4bbf92/32.png) [@baoyun](https://discourse.vtk.org/u/baoyun)
#### Post date: [July 19, 2023, 11:04pm UTC](https://discourse.vtk.org/t/existing-html-element-setcontainer-work-well-for-paraview-no-sucess-for-vtk-js-as-client/11987/3 "2023-07-19T23:04:53Z")

</div>

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');
  this.div.appendChild(divRenderer);
  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.

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [July 20, 2023, 3:46pm UTC](https://discourse.vtk.org/t/existing-html-element-setcontainer-work-well-for-paraview-no-sucess-for-vtk-js-as-client/11987/4 "2023-07-20T15:46:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![baoyun](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/b/4bbf92/32.png) [@baoyun](https://discourse.vtk.org/u/baoyun)
#### Post date: [July 20, 2023, 5:16pm UTC](https://discourse.vtk.org/t/existing-html-element-setcontainer-work-well-for-paraview-no-sucess-for-vtk-js-as-client/11987/5 "2023-07-20T17:16:45Z")

</div>

thanks, a lot. That worked.