Transform inline filters of any dynamic block into horizontal scrollable filters

matthieu_chateau · March 22, 2023, 11:08pm

Hi all!
HERE IS THE DEMO: https://test-play.softr.app/sliding-filters

Explanation:

The filters title/label will be displayed on the left of the filters, for the simple reason that the code gets the element of the dynamic block which gathers the filters title/label + the filters. I was unable to get the child element (I suspect it to be .tag-list-container but not sure this is really a “child element”) to make the code to work.

If someone is able to find a solution…

As a consequence of 1. when inserting the code, you will see that the filters title/label is not aligned with the filters. No problem: or you remove the filters title/label or you play with the padding top and padding bottom of the label of the inline filters (most of the time you need a padding top bigger than padding bottom). See screenshot to know what I am talking about.
The scrollbar is set to appear if there are more than 8 filters. You can play both with width:70% and .css-14s99i0 > *:nth-child(n+9) { to change the width of the filter container and the number of filters needed to make the scoll bar appear.
The scrollbar is customizable (height and background color, for the unactive, active and hover mode)
The original effect of the code is disabled for tablet and mobile devices, as Softr handles it well. Though the code works well on mobile and tablet, so if you want to make it work on any device size, just remove @media screen and (max-width: 767px) { .css-14s99i0 { display: block; width: auto; overflow-x: auto; white-space: normal; }

Here is the code to insert in the header of your page settings:

<style>
  .css-14s99i0 {
    display: flex;
    width: 70%;
    overflow-x: scroll;
    white-space: nowrap;
  }
  
  .css-14s99i0::-webkit-scrollbar {
    height: 11px;
    width: 8px;
    background-color: #f1f1f1;
    -webkit-appearance: none;
  }
  
  .css-14s99i0::-webkit-scrollbar-thumb {
    background-color: #888;
  }
  
  .css-14s99i0::-webkit-scrollbar-thumb:hover,
  .css-14s99i0::-webkit-scrollbar-thumb:active {
    background-color: #555;
  }
  
  .css-14s99i0 > * {
    flex: 0 0 auto;
    margin-right: 10px;
  }
  
  .css-14s99i0 > :last-child {
    margin-right: 0;
  }
  
  .css-14s99i0 > *:nth-child(n+9) {
    display: none;
  }
  
  @media screen and (max-width: 769px) {
    .css-14s99i0 {
      display: block;
      width: auto;
      overflow-x: auto;
      white-space: normal;
    }
    
    .css-14s99i0 > * {
      margin-right: 0;
    }
    
    .css-14s99i0 > *:nth-child(n+9) {
      display: block;
    }
  }
</style>