Text highlight to filter keywords - Not Working

The text highlight to filter keywords ads the correctly but the text is not highlighting.

Link to the filter: Panel Selector

To replicate type: “vog” in the panel name.

@benchmark, we can see that your CMS Filter v2 is correctly adding the <span> tags as shown in your screenshot, but the visual highlighting isn’t appearing. This is simply a styling issue.

The filtering mechanism is working correctly - it’s adding the .is-list-highlight class to the text, but there’s no CSS styling defined for this class, which is why you don’t see any visual highlighting.

To fix this, you need to add some CSS styling for the highlight class. Here are two ways to do this:

  1. Add this CSS to your site’s “Head Code” section:
<style>
.is-list-highlight {
  background-color: #ffff00;
  font-weight: bold; /* Optional */
}
</style>
  1. Or create a styled element in Webflow:
    • Add any element to your page
    • Name it is-list-highlight
    • Style it with your desired highlight appearance
    • You can hide this element afterward - Webflow will still generate the CSS

Also, double-check that you have fs-list-highlight="true" added to your filter field elements or script tag.

If you need any custom code help with this, @Support-Luis or @Support-Pedro can assist you further.

Much appreciated. It works well now; thank you.

1 Like