<div dir="ltr">Hi Tom,<div><br></div><div>Glad you figure it out. What I was previously trying to say was that in you CSS definition you were not providing any constraint on the width and the behavior of a container was to match the width of what it contains unless the contains is smaller than the width of the window (block). So the parent container has no reason to shrink since it always contains a canvas of a fixed size. Unless you tell that container that it should not be affected by the size of what is inside.</div></div><br><div class="gmail_quote"><div dir="ltr">On Tue, Jun 12, 2018 at 6:09 AM Sgouros, Thomas <<a href="mailto:thomas_sgouros@brown.edu">thomas_sgouros@brown.edu</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Ok, turns out this is a CSS question. Table-layout: 'fixed' is the answer (in the display: 'table' div), in case someone else is ever wondering why their cells grow but do not shrink. Sorry for the extra traffic.<div><br></div><div> -Tom</div></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Jun 11, 2018 at 5:25 PM, Sgouros, Thomas <span dir="ltr"><<a href="mailto:thomas_sgouros@brown.edu" target="_blank">thomas_sgouros@brown.edu</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">I should also add that the reason I need this is because I'm trying to toggle the visibility of one of two side-by-side vtkRenderer objects. But what happens is that when I make one of them invisible, the container of the other assumes a width of 100% and the VtkRenderer also gets wide. But then when I make it visible again, the VTKRenderer is a fixed width and will not shrink to fit its window.<div><br></div><div>I imagine I can also deal with this by explicitly setting the width of the VtkRenderer, but don't understand why it doesn't work automatically. But maybe setting it explicitly is the preferred method?</div><div><br></div><div>Thanks,</div><div><br></div><div> -Tom</div></div><div class="m_5830171046681461592HOEnZb"><div class="m_5830171046681461592h5"><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Jun 11, 2018 at 5:06 PM, Sgouros, Thomas <span dir="ltr"><<a href="mailto:thomas_sgouros@brown.edu" target="_blank">thomas_sgouros@brown.edu</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi Sebastien:<div><br></div><div>I'm afraid I don't understand what you're saying here. Why would the container grow due to the setup of my css? I thought the way it works is that I resize the window, and SIzeHelper.onSizeChange() gets called. I use that function to call .resize() on the renderers and the vertical works perfectly, but the horizontal only goes one direction.</div><div><br></div><div>Here's the entire hierarchy. There is no external CSS, so this is everything. I went back and tried to make the height and width parallel, set the same way. What I observe is that as I change the window size, the height (the number '686' in the image) changes when I make the window smaller or larger, but the width (the number '565') only changes when I make the window wider. When I make the window narrower I have to refresh the page to get the new width and then it looks right. Can you identify what isn't the same between width and height in my hierarchy?</div><div><br></div><div>Thanks,</div><div><br></div><div> -Tom</div><div><br><div><img src="cid:ii_jiapr05z0_163f08c4775ecdfd" width="444" height="186"><br></div><div><br></div><div><br></div></div><div><br></div></div><div class="m_5830171046681461592m_-7303185467710518607HOEnZb"><div class="m_5830171046681461592m_-7303185467710518607h5"><div class="gmail_extra"><br><div class="gmail_quote">On Thu, Jun 7, 2018 at 3:42 PM, Sebastien Jourdain <span dir="ltr"><<a href="mailto:sebastien.jourdain@kitware.com" target="_blank">sebastien.jourdain@kitware.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">The renderer will ask for its container size when you call resize() on it. So if that container keep growing due to the setup of your css, the size propagation won't go to the server as the container will never shrink.<div><br></div><div>You need to fix the width in some way like you did for the height. You can use 50vw or use a mix of absolute/relative position in your dom hierarchy.</div></div><div class="m_5830171046681461592m_-7303185467710518607m_679016964248928483HOEnZb"><div class="m_5830171046681461592m_-7303185467710518607m_679016964248928483h5"><br><div class="gmail_quote"><div dir="ltr">On Thu, Jun 7, 2018 at 12:35 PM Sgouros, Thomas <<a href="mailto:thomas_sgouros@brown.edu" target="_blank">thomas_sgouros@brown.edu</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi Sebastien:<div><br></div><div>Looks like this:</div><div><br></div><div><div> <div id="renderContainerTwo"</div><div> style={{position: 'relative',</div><div> height: '80vh',</div><div> overflow: 'hidden',</div><div> zIndex: '10',</div><div> }}</div><div> /></div><div> </div></div><div>Another data point: when I shrink or grow the window in the vertical, the *height* of the canvas element changes in both directions, but the width only changes when I grow the window and not when I shrink it. Maybe what you're saying though is that I should travel up the hierarchy and see where I'm setting heights and widths in non-parallel ways?</div><div><br></div><div>Thank you,</div><div><br></div><div> -Tom</div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Thu, Jun 7, 2018 at 2:28 PM, Sebastien Jourdain <span dir="ltr"><<a href="mailto:sebastien.jourdain@kitware.com" target="_blank">sebastien.jourdain@kitware.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi Tom,<div><br></div><div>That would be a ParaViewWeb question. The issue is related to the css for your div that contains the renderer.</div><div>To allow the renderer to shrink you need to set "overflow: hidden;" assuming the rest of the size of the div is defined by other constraints.</div><div><br></div><div>Seb</div></div><br><div class="gmail_quote"><div><div class="m_5830171046681461592m_-7303185467710518607m_679016964248928483m_3956569627661526033m_695519209434397304h5"><div dir="ltr">On Thu, Jun 7, 2018 at 11:41 AM Sgouros, Thomas <<a href="mailto:thomas_sgouros@brown.edu" target="_blank">thomas_sgouros@brown.edu</a>> wrote:<br></div></div></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><div class="m_5830171046681461592m_-7303185467710518607m_679016964248928483m_3956569627661526033m_695519209434397304h5"><div dir="ltr">Hi All:<div><br></div><div>I'm not sure if this is a VTK question or a Paraview question, so apologies in advance. In a ParaViewWeb application, I have a vtkRenderer in a div in another div, etc. The vtkRenderer seems to adjust when I make the window it's in bigger or the container, but it does not resize when I make the window smaller. Using the browser's element viewer, I can see the <canvas> object inside, and see its width reach when I expand elements and refuse to react when I contract the window or container.</div><div><br></div><div>When I create the vtk renderer, I use this code:</div><div><br></div><div><div> this.renderers.push(VtkRenderer.newInstance({</div><div> client: this.model.pvwClient,</div><div> viewId: result,</div><div> }) );</div></div><div><br></div><div> ... and then later...</div><div><br></div><div><div> SizeHelper.onSizeChange(() => {</div><div> this.renderers[0].resize();</div><div> this.renderers[1].resize();</div><div> });</div><div> SizeHelper.startListening();</div></div><div><br></div><div>I invoke the SizeHelper.triggerChange() method regularly and it seems to work, though again only to make the renderer bigger.</div><div><br></div><div>Should I be resizing these with a direct call to some method? What is the way I should be doing this?</div><div><br></div><div>Thank you,</div><div> </div><div> -Tom</div><div><br></div><div><br></div><div><br></div></div></div></div>
_______________________________________________<br>
Powered by <a href="http://www.kitware.com" rel="noreferrer" target="_blank">www.kitware.com</a><br>
<br>
ParaView discussion is moving! Please visit <a href="https://discourse.paraview.org/" rel="noreferrer" target="_blank">https://discourse.paraview.org/</a> for future posts.<br>
<br>
Visit other Kitware open-source projects at <a href="http://www.kitware.com/opensource/opensource.html" rel="noreferrer" target="_blank">http://www.kitware.com/opensource/opensource.html</a><br>
<br>
Please keep messages on-topic and check the ParaView Wiki at: <a href="http://paraview.org/Wiki/ParaView" rel="noreferrer" target="_blank">http://paraview.org/Wiki/ParaView</a><br>
<br>
Search the list archives at: <a href="http://markmail.org/search/?q=ParaView" rel="noreferrer" target="_blank">http://markmail.org/search/?q=ParaView</a><br>
<br>
Follow this link to subscribe/unsubscribe:<br>
<a href="https://public.kitware.com/mailman/listinfo/paraview" rel="noreferrer" target="_blank">https://public.kitware.com/mailman/listinfo/paraview</a><br>
</blockquote></div>
</blockquote></div><br></div>
</blockquote></div>
</div></div></blockquote></div><br></div>
</div></div></blockquote></div><br></div>
</div></div></blockquote></div><br></div>
</blockquote></div>