Support relative positioning

[oeway]

I think it's a bit limiting that the viewer and the control panel assumes it's the first element in the entire page and use absolute position. For example, this is not compatible with the following UI layout:

And I had to add the following css to get around of it:

#viewer > div:nth-child(2) {
  top: 64px!important;
}

#viewer > div:first-child {
  height: calc(100vh - 64px)!important;
  min-height: 100px!important;
}

Such that it looks like this:

[thewtex]

The viewer is in a relative location in a Jupyter cell when in itkwidgets,

https://mybinder.org/v2/gh/InsightSoftwareConsortium/itkwidgets/master?urlpath=lab/tree/examples%2F3DImage.ipynb

What if we place the viewer inside an additional div in the ImJoy plugin, or something similar?

[oeway]

Hi, thanks for the response. I just tried to wrap it into another div, but didn't work.

Here is how it looks: https://imjoy.io/lite?plugin=https://gist.github.com/oeway/a972c472186a798f1d0a5cdc74e1ddba

[oeway]

I just figured that if I add style="position: relative;" to the parent div of the viewer, it works.

<div style="position: relative;">
  <div id="viewer"></div>
</div>

Do you think there is anything you can do within the viewer? Otherwise, I will close this issue.

[thewtex]

It took a little dive into CSS to understand what is happening :nauseated_face:

The reason the plugin positioning not where desired is because there is a missing Containing Block per

• https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block
• https://css-tricks.com/absolute-positioning-inside-relative-positioning/
• https://dzone.com/articles/css-position-relative-vs-position-absolute

But, we want use absolute positioning for the ui container element because we want the ui to be on top of the rendering canvas.

So, the solution is to add a minimal position to the div containing the viewer.

      <div id="viewer" class="viewer-container"> </div>

[...]

.viewer-container {
  position: relative;
  top: 8px;
  left: 5px;
}

Voila! :-): https://gist.github.com/thewtex/b6f7572d648ccd31af4d7d1972463ac1