Extend canvas when required #48

webassets/css/style.css

@@ -157,9 +157,7 @@ div#bands-container {
     margin: 0;
     padding: 0;
     overflow-x: auto;
-    overflow-y: visible;
     white-space: nowrap;
-    display: flex;
     overscroll-behavior-x: none;
 }
 
@@ -169,6 +167,7 @@ div#bands-container {
 
 #bands-table th {
     width: 20%;
+    max-height: 40px;
     min-width: 12em;
     padding: 0.5em;
     text-align: center;

webassets/js/bands.js

@@ -59,6 +59,9 @@ function updateBands() {
         }
     });
 
+    // Track if any columns end up taller than expected, so we can resize the container and avoid vertical scroll.
+    var maxHeightBand = 0;
+
     // Build up table content for each band
     var table = $('<table id="bands-table">').append('<thead><tr></tr></thead><tbody><tr></tr></tbody>');
     bandToSpots.forEach(function (spotList, bandName) {
@@ -113,6 +116,7 @@ function updateBands() {
         // spots have gone off the end of the band markers and stretched their div, we need to resize the canvas to
         // match, otherwise we have nowhere to draw their connecting lines.
         var canvasHeight = Math.max(BAND_COLUMN_HEIGHT_PX, (lastSpotEmDownBand+1.6) * BAND_COLUMN_FONT_SIZE);
+        maxHeightBand = Math.max(maxHeightBand, canvasHeight);
 
         // Draw horizontal or diagonal lines to join up the "real" frequency with where the spot div ended up
         var bandLinesCanvas = $(`<canvas class='band-lines-canvas' width='${BAND_COLUMN_CANVAS_WIDTH_PX}px' height='${canvasHeight}px' style='height:${canvasHeight}px !important;'>`);
@@ -146,6 +150,9 @@ function updateBands() {
     // Update the DOM with the band HTML
     bandsContainer.html(table);
 
+    // Increase the height of the bands container so we don't have any vertical scroll bars except the browser ones
+    bandsContainer.css("min-height", `${maxHeightBand + 42}px`);
+
     // Desktop mouse wheel to scroll bands horizontally if used on the headers
     table.find('thead tr').on("wheel", () => {
         bandsContainer.scrollLeft(bandsContainer.scrollLeft() + event.deltaY / 10.0);