Getting resource cards to filter properly after filtered search

[angusmacdonald]

I’ve created a page so that users for the charity I work for (supporting librarians in UK) can filter through different resources available. The page is generally working well, but one thing that is that the resource cards aren’t neatly stacking when results are run.

I’ve created a test page here

You can see the issue in the following screenshot where there’s blank spaces where instead I would like all slots to be filled with resource cards rather than having spare spaces once a filter has been applied (eg Show all or 4. Research Skills ).

The script I’m using to run the search is below but you can also find the code here (saved as a text document downloadable from WeTransfer). Any suggestions on how to get this resolved would be gratefully appreciated.

<script>
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

</script>

[m3g4p0p]

Hi @angusmacdonald, this is not a problem with your JS but with your cards having float: left and different heights; try removing the float and use a flex layout instead like so:

.row {
  display: flex;
  flex-wrap: wrap;
}

This way the cards should get aligned properly… you might need a dedicated selector for the card container row though as .row is probably too generic.