Section Component Container Support?

I’m curious about a section’s recently added “container” support.

Why does setting the section to behave like a container make the background color respond like a container?

I would have expected the background color always to be full-width and the content to behave like a container. However, if I want the content to behave like it is in a container but I want a full-width background color, I have to put a container within the section to get this effect.

If I DID NOT want the background full-width and to respond as a container, I would use a container, not a section.

I now put a container in most sections to achieve the desired behavior at the bigger breakpoints. It would have been nice if the section could have handled this correctly.

What am I missing?

You need to look in the “Content Sizing” group, and then the Width setting.

This will allow you to control the width of the content inside a Section.

Yes, I realize that and that is what I used. But the problem is that when it is set to container to causes the background color to be resized to the container instead of staying full width. This seems wrong to me as the title of the settings says “Content” but it is not resizing only the content but also the background color, which should not be considered content.

So in order to get the behavior I want I have to put a container inside the section to keep the background color full width.

Well this is interesting. I tried it again today and now it seems to be behaving as I expected it should. Hmm!

Aah! I finally see what is going on the container option can be set in two different places - Sizing and Content. When it is set in the Sizing section it will cause the background color width to be adjusted.

Got it!

Just downloaded the new beta and see the Section component is gone. Do we assume we’re now using Containers instead?

I’d just gotten used to using Sections for everything and no containers :slight_smile:

Correct! The Section has been merged in to the Container :slight_smile:

Just to be clear to anyone else reading this: we added the following warning notice to the release notes on the latest update.

3 Likes

I have noticed an odd behavior with the reworked container in build 22867.

When I have a bunch of header and paragraph components in the container, the content sizing set to container, and the alignment set to center, it looks as follows.

But if I set the alignment to LEFT ALIGNED, the contents go all the way to the FULL left edge instead of to the left edge of the container based on the breakpoint setting, as follows.

Is this a bug or the expected behavior, as it seems odd and not what I would have expected?

This problem appears in the MAIN Container, as shown in the screenshots. Settings are displayed to the right.