Collection Items content generated outside of Collection List Wrapper on published site

Design help Custom code
1

Hi Webflow Forum,

To give some context, I was tasked with adding filtering and sorting on my client’s dynamic table. Therefore I suggested using Finsweet Attributes which I’ve used successfully on countless projects with no problem. I’m struggling with strange Collection behavior when publishing though.

For some reason, when publishing on the staging site the dynamic elements from the CMS collection are not populating WITHIN the collection. They’re instead generated outside of / below it. Rendering the Finsweet script useless as it can’t target the attributes within the collection items of the collection list.

If you look at the screenshots below, you’ll see that in the first image the Collection Wrapper is within the table_body element.

image (2)
image (2)3046×1856 420 KB

When publishing on the other hand, the collection wrapper is above table_component, the parent of table_body. The collection items are empty as their content is taken to populate the table_cells in a way that escapes me.

image (1)
image (1)1920×1132 182 KB

I’m not sure, but perhaps it might be caused by the fact my client’s previous developer built the table using "Custom Element"s? I’ve never used those so I’m not sure if this is part of their behavior?

image
image497×258 20.7 KB

Any help would be greatly appreciated. I’d just like to understand why this is happening and if there’s anything that can be done in order to make it so Finsweet’s CMS Filter and Sort can be used on this page.

Best,
Vincent

Here is my site Read-Only: LINK

2

I’d suspect a browser rendering issue.
With your combination of collection lists and custom elements, what you’re effectively publishing is this;

<table>
  <div>
     <div>
        <div>
          <tr>
            <td> ... </td> 
          </tr>
        <div>
        ... 
     <div>
  <div>
<table>

I think most browsers will choke at the DIVs inside of the TABLE element, and restructure it to something HTML-legal.

There’s unfortunately no native way to tell the collection list to suppress its wrapper classes during the server-side render (SSR), so you need to change your approach or try to “fix” the HTML before FS libs run.

One option is to ditch tables entirely and just go for nested DIVs and flex- I like this approach as it’s more responsive than <table>, which is why it doesn’t get much love on the modern web.

Another is to try to script-unwrap those DIVs before FS libs run.

3

Hi Michael,

Thank you for your reply. I also exchanged with someone else on the Webflow Partners’ Slack and I have come to the conclusion that it will definitely be best to rebuild the table with div blocks and flexbox whilst adding the appropriate aria roles on the blocks for the table to be standard.

Appreciate the support,
Vincent

1 Like
4

I didn’t realize nesting <div>s inside a <table> would cause such issues across different browsers.