Remove Scrollbar from Facets Box (Winter '21 Release)

We have corrected an issue where a scroll bar would show for certain experiences when you hover over the facets box, even though all facet options were already showing. We determined this issue occurs when an experience uses a custom font with a text height larger than the line height of the label.

We have added the variable --yxt-filter-options-option-label-line-height to the answers-variables.scss file, which controls the line height of the option label in the filter options component. This is now set explicitly in the theme and can be overridden if you add a custom font and see this issue. We have also made adjustments to the padding and margin of the facets to give more leeway with custom fonts.

Upgrade Implications:
If you are upgrading, you will not have this variable by default. To remedy this, copy the --yxt-filter-options-option-label-line-height variable into your answers-variables.scss file, like below.

  // component specific variable overrides
  --yxt-filters-and-sorts-font-size: var(--yxt-font-size-md);
  --yxt-filter-options-option-label-line-height: 20px;

:spiral_calendar: This feature is available in Early Access. Here’s how to use the Early Access branches of the Theme and SDK!

Hi Kristy,

I followed your steps of adding the 2 lines of variable overrides but unfortunately still have the scrollbar in the facets box. Is there anything else you propose I try?

Thanks,
Ilana

Hi Iliana,

What theme are you on? You’ll need to be on theme 1.27 or later to take advantage of this bug fix and the new variables.

Ah, that would make sense. I am on 1.26 currently. Thanks for the insight!