Unable to get the CMS Nest + CMS Tabs to work

[gabriel.babus]

Hi there, I’ve been trying to implement CMS Nest + CMS Tabs for a couple of hours unsuccessfully. I’ve tried to use the Automated Support Service and it says that everything is set up correctly, but it still doesn’t work.

I have two CMS Tabs on the page, one with the ‘native’ nest collection in place, but for the other one I need to use the CMS nest solution as I can only have one native nest collection

This is my read-only link

On the “suppliers” page

[Support-Luis]

hey @gabriel.babus! I believe this is a styling issue,if you inspect the tab on your second list, the first tab has the correct elements nested but something is preventing them from showing on the page.

Please check all styles, I’d advise you to focus on getting the nested list showing up correctly and then integrating CMS Tabs.

[gabriel.babus]

Thanks so much for the reply @Support-Luis

I’ve been looking left and right to see what’s causing this, and I see that the w-dyn-list has style set to display: none; but also the lsit is empty

I have no extenal script or interaction on the page that could cause this behavior so I believe it comes from the scripts in the tag from the finsweet solution? or maybe some misplaced attributes?

Any suggestion you might have is more than welcomed

Thanks!

[Support-Luis]

@gabriel.babus yes, this style is added to the list once CMS Tabs is done. The content of each item is moved onto the tabs component, this is why we prevent the load until after CMS Nest is done.

I noticed your nested collection is empty. Could you add a text element to the nested elements?

I also see the live page is locked, you can DM the password as debugging is easier this way

[gabriel.babus]

I’ve sent you a private message @Support-Luis . Thanks

[Support-Luis]

@gabriel.babus, answered!

[Bart]

Hi, @gabriel.babus I’m also experiencing problems implementing CMS Nest with CMS Tabs.

https://brandgang.webflow.io/

Underneath the HubSpot logo a list of HubSpot services should be listed. However, the nest doesn’t load the items.

Would you please take a look for me? Here is the Share link.

Very best,

Bart

[Support-Luis]

Hey @Bart! CMS Nest and CMS Tabs will not work together without some extra setup. You’ll need to delay the CMS Tabs script with this script →

<!-- [Attributes by Finsweet] CMS Tabs -->
<script
defer
fs-attributes-preventload="true"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmstabs@1/cmstabs.js"
></script>

And trigger its load with this script

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsnest',
    (listInstances) => {
      console.log('cmsnest Successfully loaded!');
      window.fsAttributes.cmstabs.init();
    },
  ]);
</script>

Here is a screenshot of the end result

[Bart]

Hey @Support-Luis,

Thanks a lot, it’s working properly now!