Extend canvas when required #48

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);