#7398 fix the spark progress bar labels alignment (#7400)

twosigma · May 22, 2018 · d0ffc21 · d0ffc21
1 parent eef7600
commit d0ffc21
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/js/notebook/src/SparkStateProgress.ts b/js/notebook/src/SparkStateProgress.ts
@@ -182,7 +182,7 @@ class SparkStateProgressView extends widgets.VBoxView {
     let valueActive = state.active;
     let valueWaiting = max - (valueDone + valueActive);
 
-    this.progressLabels = document.createElement('p');
+    this.progressLabels = document.createElement('div');
     this.progressLabels.classList.add('bx-spark-stageProgressLabels');
 
     this.progressLabels.innerHTML = `

diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
@@ -29,3 +29,16 @@
 .bx-spark-stageProgressBar {
   margin: 0 10px;
 }
+
+.bx-spark-stageProgressLabels {
+  display: block;
+  line-height: 100%;
+  height: 18px;
+  align-items: center;
+
+  .label {
+    display: inline-block;
+    max-height: 100%;
+    line-height: 150%;
+  }
+}