Fix for flickering issue

cerner · Jul 6, 2023 · 8cfc659 · 8cfc659
1 parent 0f696b9
commit 8cfc659
Show file tree

Hide file tree

Showing 3 changed files with 637 additions and 563 deletions.
diff --git a/packages/terra-clinical-result/src/flowsheet-result-cell/FlowsheetResultCell.jsx b/packages/terra-clinical-result/src/flowsheet-result-cell/FlowsheetResultCell.jsx
@@ -354,7 +354,7 @@ const createFlowsheetResultCellDisplay = (resultDataSet, hideUnit, numericOverfl
       );
       compositeCell.push(endDisplay);
 
-      return compositeCell;
+      return <div className={cx('combined-display')}>{compositeCell}</div>;
     }
 
     const additionalResultsStackDisplay = (
@@ -364,7 +364,7 @@ const createFlowsheetResultCellDisplay = (resultDataSet, hideUnit, numericOverfl
     );
     compositeCell.push(additionalResultsStackDisplay);
 
-    return compositeCell;
+    return <div className={cx('combined-display')}>{compositeCell}</div>;
   }
 
   if (hasAccessoryIcons) {
@@ -377,7 +377,7 @@ const createFlowsheetResultCellDisplay = (resultDataSet, hideUnit, numericOverfl
     compositeCell.push(endAccessoryIconsDisplay);
   }
 
-  return compositeCell;
+  return <div className={cx('combined-display')}>{compositeCell}</div>;
 };
 
 const FlowsheetResultCell = (props) => {

diff --git a/packages/terra-clinical-result/src/flowsheet-result-cell/FlowsheetResultCell.module.scss b/packages/terra-clinical-result/src/flowsheet-result-cell/FlowsheetResultCell.module.scss
@@ -12,11 +12,18 @@
     padding: 0;
   }
 
+  .combined-display {
+    display: flex;
+    flex: 1 1 100%;
+    margin: 0;
+    max-width: 100%;  // Needed for IE10 truncation
+    padding: 0;
+  }
+
   .primary-display {
     align-items: center;
     display: flex;
     flex: 1 1 100%;
-    // float: left;
     height: var(--terra-clinical-result-flowsheet-cell-primary-display-height, 1.78571em); // Must use ems for font scaling
     margin: 0;
     margin-left: var(--terra-clinical-result-flowsheet-cell-interpretation-icon-reserved-space-margin-left, 1.1875em); // Must use ems for font scaling
@@ -38,7 +45,6 @@
   .end-display {
     display: flex;
     flex: 0 0 auto;
-    float: right;
     height: var(--terra-clinical-result-flowsheet-cell-end-display-height, 1.78571em); // Must use ems for font scaling
     min-width: 0;
   }