#CMS #Layout #Visibility

So the other day I posted on how I could not find a way to use the Visible Items variable to conditionally hide a header stack preceding a CMS list, since that variable is only available inside the CMS container (the DB call).

My workaround was to include the header in the CMS container, and then use the Visible Items to hide it when no items are shown.

Now, the logical flow for a header is to use a VERTICAL stack:

Top row: Header ↓

Next row: the CMS List

So that hack worked when I just needed a vertical stack for my CMS list, like this:

Header ↓

CMS Item 1 ↓

CMS Item 2 ↓

CMS Item 3 ↓

etc.

BUT.

Then I had another page where I also needed to hide the header based on the number of visible items, but in this case my CMS items list required a HORIZONTAL display (see images):

Header ↓

CMS Item 1 → CMS Item 2 → CMS Item 3

So, what's the problem, you say? Well, unless I am mistaken, within the realm of a CMS list container, if you try to encapsulate the single CMS item stack in a frame to change its flow direction (from vertical to horizontal, or viceversa) it will lose its connection with the CMS database, thus becoming a regular frame.

The solution that worked for me: keep the header with conditioned visibility inside the top CMS list container (so you can use the Visible Items condition), but use a GRID display, with a full column span for the header section, so that the header stays on top, as if it were part of a vertical stack, and use the standard column span you need for your horizontally displayed row of CMS cards.

I am sharing this workaround in case if helps anybody. Maybe it was obvious, but it drove me crazy. The Framer agent said it was not possible without a code component / override.

Best

P.S. Also, I hope this community serves its members as a mutual help forum as much as it serves as a showcase / marketplace. Human collective wisdom and mutual aid will always beat AI, profit sharing or portfolio exhibition. ✊🏻✊🏽✊🏿🙂

#CMS #Layout #Visibility

So the other day I posted on how I could not find a way to use the Visible Items variable to conditionally hide a header stack preceding a CMS list, since that variable is only available inside the CMS container (the DB call).

My workaround was to include the header in the CMS container, and then use the Visible Items to hide it when no items are shown.

Now, the logical flow for a header is to use a VERTICAL stack:

Top row: Header ↓

Next row: the CMS List

So that hack worked when I just needed a vertical stack for my CMS list, like this:

Header ↓

CMS Item 1 ↓

CMS Item 2 ↓

CMS Item 3 ↓

etc.

BUT.

Then I had another page where I also needed to hide the header based on the number of visible items, but in this case my CMS items list required a HORIZONTAL display (see images):

Header ↓

CMS Item 1 → CMS Item 2 → CMS Item 3

So, what's the problem, you say? Well, unless I am mistaken, within the realm of a CMS list container, if you try to encapsulate the single CMS item stack in a frame to change its flow direction (from vertical to horizontal, or viceversa) it will lose its connection with the CMS database, thus becoming a regular frame.

The solution that worked for me: keep the header with conditioned visibility inside the top CMS list container (so you can use the Visible Items condition), but use a GRID display, with a full column span for the header section, so that the header stays on top, as if it were part of a vertical stack, and use the standard column span you need for your horizontally displayed row of CMS cards.

I am sharing this workaround in case if helps anybody. Maybe it was obvious, but it drove me crazy. The Framer agent said it was not possible without a code component / override.

Best

P.S. Also, I hope this community serves its members as a mutual help forum as much as it serves as a showcase / marketplace. Human collective wisdom and mutual aid will always beat AI, profit sharing or portfolio exhibition. ✊🏻✊🏽✊🏿🙂