SOLVED: Cannot copy stretched container styles into a class

Bricks Version: 1.4 Stable
Browser: Chrome Latest
OS: Windows 11

Not sure if this is a bug or normal container/class logic… But when you copy the styles of an ID to a custom class and then remove the styles from the ID the below occurs:

Theme styles has 2.5rem left & right padding

ID Styles - pre copy

Section:
Fullwidth container (no padding applied as stretched to full width)

  • Inner container (padding transferred from root container)
    • 2 x inner containers

Class Styles after copying/pasting ID styles then removing ID styles

Section:
Fullwidth container (Padding now applied)

  • Inner container (no padding applied or transferred from root container)
    • 2 x inner containers

update - This rule is removed after I copy and paste the ID styles to the custom class and then remove the ID styles:

.brx-container.root.stretch > .brx-container {
    width: 1350px;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

If I do not remove the styles from the ID after copying and pasting them to a class, then it is ok.

If this is normal logic, how do I then copy and paste the ID styles to a Class and then remove styles from the ID?

Thanks

Hi Michael,
thanks for your report!

The crucial point is the .stretch class. It takes care of the padding and the width of the inner container. However, since this is just a helper class, it doesn’t really exist “physically” (if you know what I mean). That’s why it doesn’t show up in the class dropdown and isn’t copied when you copy the styles of the ID.

After pasting the styles into your custom class and removing the styles of the ID, you can add the “stretch” class to the outer container. Then everything behaves exactly the same as when you style on the ID - assuming I understood everything correctly (it’s been a long day so far) :yawning_face:

Best regards,
timmse

Hey Stefan,

Yup every one rejoices in a new release and you are like…no sleeping for a week for me hahaha.

Unfortunately, I don’t think what you mentioned is correct.

Here is a quick video, you will notice that stretch is still applied to the root container.

p.s. Align container controls do not reflect flex-direction settings. (Old bug come back to bite haha)

Thank you :+1:

Hi Michael,
Thanks for the video! I may not have been clear enough:

After removing the ID styles, click the Class Input field, add “stretch” (without quotes), and press enter. After that everything should be as before.

The crucial point is the .stretch class, which gets not copied (as it is a class and not a style), unlike the stretch option and the styles attached. “.stretch” is a helper class, which only tells the next inner container what to do (not to become as wide as the stretched container and apply the padding there, instead of the stretched .root). If you inspect the source code before and after removing the ID styles, you’ll notice that there is no .stretch on your container anymore.

So this doesn’t have any effect anymore either:

Best regards,
timmse

1 Like

Awesomeness!! Thank you

You explained it perfectly, I read it imperfectly haha

1 Like

@timmse Would it be possible for bricks to automatically add the .stretch class to all root containers that are set to stretch via a class in a future release? Bricks does this for root containers set to stretch via id — why not via class? And via other methods?

I see a lot of confusion around these full-width containers floating in various forum posts. Many suggest setting a max-width in the inner container which of course isn’t the correct way to solve this (since it’s not linked to the root width). Adding .root class to the inner container also works, but I guess also isn’t the right way to do this.

1 Like

Hi faebe,
this will no longer be a problem in the next version, as all .stretch containers will be replaced by the section element (automatically via the converter), which will generally always have 100% width. In it, you can then place the container that keeps your content “in shape” (if you want your content to be max a specific width), and in the containers, you can then use regular divs.

This way every element has a purpose and we can do without all this class wizardry :mage:

2 Likes

That’s fantastic, very much looking forward to that! :smiley: