Viewer zoom target issue

Speckle Help Developers
3

@andrsbtrg

Answering from mobile, so speculative answer.

Could you try wrapping your viewer in an absolute container within your flexbox layout. Here’s a lightweight approach:

.parent-container {
  display: flex;
  height: 100vh; /* or any height you prefer */
}

.sidebar {
  width: 30%; /* Adjust as needed */
  background-color: #f0f0f0; /* Example styling */
}

.viewer-wrapper {
  position: relative;
  flex: 1; /* Fills the remaining space */
}

.viewer-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="parent-container">
  <div class="sidebar">
    <!-- Sidebar content here -->
  </div>
  <div class="viewer-wrapper">
    <div id="viewer" class="viewer-container"></div>
  </div>
</div>

I believe this setup should help the viewer’s zoom and centering work properly while keeping your layout intact. I have no idea what this looks like in React-land.

Let me know if it helps!

2 Likes