CMS Filter - View All button not working

[Poetic]

I am using FS filtering on a blog page (see preview link below). I set up the filtering using FS accessible component UI kit radio buttons. I followed the documentation to set the “view all” button on page load (linked below), but the button is not active on page load and no styles are showing when clicked. The filters are clearing properly but I need to get the active state working. Any ideas?

read-only link:
https://preview.webflow.com/preview/asset-3-v3?utm_medium=preview_link&utm_source=designer&utm_content=asset-3-v3&preview=20f2b26a3fa9abb4cd2b3b65dc2a364d&pageId=650a6093eb90c5f9ccd95af5&workflow=preview

staging site:

Asset Living Blog | Industry Insights

documentation followed:

How can I add and style an "All" button for CMS Filter

To style a radio button that shows “All” results from your list on page load you’ll need to have a non-cms radio button, this radio button should be in the same group name as the other radios in your form. Note: this does not use the fs-cmsfilter-active = is-active option To give this button an active state and for it to be checked on load: Set the style to custom [Set Custom Style] Set the attribute checked = checked on the radio input [checked = checked] To clear the filters add the f…

[yogdog]

Hi @Poetic - don’t know if this will fix it, but having looked at your preview link, the radio button for view all has a different Radio Group name to the CMS radios. As per the docs you shared in your post, they all need to have the same group name.

All items:

CMS radios:

[Poetic]

Thanks for the help! I updated the group name to be consistent with the CMS radios, but still no luck. Any ideas @Support-Luis ?

[Support-Luis]

Hey @Poetic! you seem to be missing the background color on your embedded style.

Can you add this?

<style>
  .fs-radio_button-4.w--redirected-checked ~ .fs-radio_label-4 {
    color: #154571;
    background: aliceblue;
  }
</style>

[Poetic]

@Support-Luis

<style>
  .fs-radio_button-4.w--redirected-checked ~ .fs-radio_label-4 {
    color: #154571;
    background: aliceblue;
  }
</style>

@Support-Luis This is working better, it add the background on page load. But the problem is that I don’t want a background color, I want the border color of view all to be #154571 on page load. Can this script be modified for border color? I want it to have the same border that the other filter fields have when they are clicked.

[Support-Luis]

Sure! Here is the updated style

<style>
  .fs-radio_button-4.w--redirected-checked {
    border: 1px solid #154571; /* Add border to .fs-radio_button-4 */
  }
</style>