Merge pull request #130 from cornerstonejs/fix/right-orientation-mark…

…er-offscreen Consider scrollbar and marker width when positioning right marker
cornerstonejs · Dec 7, 2021 · 4068ba2 · 4068ba2
2 parents 9d91186 + dc7c081
commit 4068ba2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css
@@ -1,4 +1,6 @@
 .ViewportOrientationMarkers {
+  --marker-width: 100px;
+  --scrollbar-width: 20px;
   pointer-events: none;
   font-size: 15px;
   color: #ccc;
@@ -15,13 +17,16 @@
   top: 47%;
   left: 5px;
 }
-
 .ViewportOrientationMarkers .right-mid {
   top: 47%;
-  left: 97%;
+  left: calc(100% - var(--marker-width) - var(--scrollbar-width));
 }
-
 .ViewportOrientationMarkers .bottom-mid {
   top: 97%;
   left: 47%;
 }
+.ViewportOrientationMarkers .right-mid .orientation-marker-value {
+  display: flex;
+  justify-content: flex-end;
+  min-width: var(--marker-width);
+}
diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js
@@ -121,7 +121,7 @@ class ViewportOrientationMarkers extends PureComponent {
           className={`${m}-mid orientation-marker`}
           key={`${m}-mid orientation-marker`}
         >
-          {markers[m]}
+          <div className="orientation-marker-value">{markers[m]}</div>
         </div>
       ));