Intro infobox style is not CSS but directly written in the element style

[ThibaultGuillaumont]

The intro text area style is not editable when integrated in a webpage because it is directly in the style of the element.

<sv-splash class="ff-popup sv-splash" style="position: fixed; z-index: 1000; left: 715px; top: 442px;">
intro 
</sv-splash>

It creates issues when integrating on a half-page column as it's not longer possible to close it and access content. And it seems like I cannot create specific CSS stylesheet to handle the issue on the page as the position is hard coded on the element.

Screenshot of the webpage on a 1080p screen :

[gjcope]

Hi @ThibaultGuillaumont - intro splash screen uses our "Popup" class which is used for many other things in Explorer/Story as well. For instance, do you see the same issue with the "Share" popup in your example above?

The positions in the element are dynamically generated by the class to center it. It seems maybe we missed a corner case where it does not. Can you share a simple example of an HTML layout in which this occurs? We do have column layouts where it works as expected, so it would be helpful to figure out what the missing piece is here. Thanks!

[ThibaultGuillaumont]

Hi @gjcope , thanks a lot for your reply !

Indeed, same issue with the "Share" Popup

The page is online if you want to have a look : https://holusion.com/en/posts/2024-11-20-MappingCluny

This is how we call the Voyager Module on a Jekyll website. The layout uses CSS grid.

variables {{include.server}} and {{include.scene}} are the path to the server and the scene ID.

<div style="width:100%; overflow:hidden;" class="media">
  <div class="ecorpus_container">
    <voyager-explorer id="{{include.scene}}"resourceRoot="{{include.server}}/dist/"  root='{{include.server}}/scenes/{{include.scene}}/' document='scene.svx.json'></voyager-explorer>
    <script src="{{include.server}}/dist/js/voyager-explorer.js"></script>
    </div>
</div>

[gjcope]

@ThibaultGuillaumont Thanks! This was really helpful.

The main issue stems from the original goal of the pop-ups being centered to the window rather than the component. This can be beneficial in some cases, but I think makes it more complicated to accommodate certain layouts like the one here.

I've made updates to all of the Explorer pop-ups to change the container used for the centering calculations and changed from fixed to absolute positioning. My css skills are not great so if you or @sdumetz have any input on downsides to using absolute, please weigh in. But it seems to be working fine so far. You can check it out here: https://github.com/Smithsonian/dpo-voyager/tree/dev-popup

[sdumetz]

It breaks the color-picker in voyager-story properties. There is a deep nesting of relative and absolute-positioned elements and I can't really work out why they needed to be relative in the first place (this, and the -500px margin).

Even providing an explicit portal, like .portal=${this.closest(".ff-scroll-y")} I couldn't find an element that would correctly position the popup. And that would not be a very robust solution.

The color-picker from the environment toolbar works fine though.

Other than that I think having those Popups centered within the "explorer" view instead of the whole screen in voyager-story is generally good.

[sdumetz]

This seems to fix it, but it's not pretty and probably asking for trouble :

diff --git a/libs/ff-ui/source/Popup.ts b/libs/ff-ui/source/Popup.ts
index 875b36d7..a2a6130a 100644
--- a/libs/ff-ui/source/Popup.ts
+++ b/libs/ff-ui/source/Popup.ts
@@ -106,7 +106,7 @@ export default class Popup extends CustomElement
         super.firstConnected();
 
         this.setStyle({
-            position: "absolute",
+            position: this.portal?"absolute":"fixed",
             zIndex: "1000"
         });