Filter Spacing with Collapsible Filters on Non-Map Verticals

Search Best Practices - Search Front-End
1

Hello!

When we launched collapsible filters, we added some out-of-the-box alignment for those filters on map verticals. We’re currently in progress adding that syling to verticals without maps too (so when you enter “collapsed filter” mode, your filters will line up nicely).

Before :cry:

before
before516×560 24.6 KB

After :tada::tada::tada::tada:

after
after515×555 26.7 KB

Until that’s released, here’s some scss you can add to get your filters aligned!

.Answers
{
  &.AnswersVerticalStandard, &.AnswersVerticalGrid {

    &.CollapsibleFilters {

      .yxt-SortOptions-option {
        align-items: center;
        margin-top: .5rem;
        margin-bottom: 0px;
      }

      .yxt-FilterBox-filter {
        margin-top: 1rem;
        border-top: none;
      }

      .yxt-FilterOptions-fieldSet {
        margin: 0;
        border: 0;
        padding: 0;
      }

      .Answers-sortOptions {
        padding: 0rem 0rem .25rem 0rem;
      }

      .yxt-Facets-container {
        width: 100%;
        padding: 0
      }

      .Answers-facets {
        padding: 0;
      }

      .Answers-filtersWrapper {
        .Answers-sortOptions:not(:last-child) {
          .yxt-SortOptions-fieldSet  {
            border-bottom: 0;
            padding-bottom: 0;
          }
        }
      }    
    }
  }
}

Let us know how this works for you, and stay tuned for this styling included by default in a future theme release!

Rose

3 Likes