Bricks Version: 1.5b Browser: Chrome 103.x OS: Win URL: (a link to a page that illustrates the issue would be really helpful)
I’m not sure if this is a bug or not, but it appears that out of the box, there is a ‘default’ size to the displayed containers when applied so they are easily accessible, great! Now, the issue I’m curious about is when changing the size of a container, and how it affects child containers when they are displayed. I’ve taken a screenshot of my screen where I have a ‘section’ that is just the default size with a container inside that. I then changed the default padding on the section overriding the defaults so there is no top/bottom default padding. The result is the container inside the section is not being resized to fit within the displayed size of the Section which I would think it should.
I would think that the blue outline should be resized to match the extends of its parent, no? I will note I am using ACSS together with bricks, but regardless where the directive is coming from for the size to change, it should adjust accordingly I would think.
I did further test this by adding some content, and the child elements don’t honor the size of the parent…
The Section and Container Element have a min-height on the canvas to make them selectable. However, they both have no default padding, which makes me wonder why you need to remove a default padding
I guess ACSS is somehow interfering. Does it happen as well when ACSS is disabled?
I do not use ACSS and have never encountered this problem.
@timmse I’ve tried with and without, similar result. ACSS does affect positioning a little bit, but the ‘appearance’ still does a similar effect. My original question is really, shouldn’t the bounding boxes of children fit within its parent, thats really the issue I’m seeing.
This is with ACSS off, and a ‘Section → Container → Div’ setup natively.
The only thing I’ve done here is resize the height of the section. My thought is that the child container & div should fit within the parent section, or if it was a root container, the child div fit within that, even if there is nothing there as you’ve clearly resized it. I understand from a starting point, you have to have something to be able to select, so that makes sense, but once its changed for whatever reason, my thought is that there is intent, and it should visually represent what your looking for.
I will say, once you add ‘something’ into lowest child div, it does resize the parent(s) to fit within the top level section/container/div as expected as you can see here.
I just see that in both examples, you applied a fixed height to the section - then this can’t work.
If you use min-height instead, the section can grow automatically if needed.
As soon as a div, section, or container has content, I would use min-height in 8/10 cases because I don’t get a problem with smaller viewports. As soon as the screen width gets narrower, the content breaks, so the wrapper has to get higher. And if you set the wrapper to a fixed height, it will not grow but stubbornly stay at the height - and that creates an overflow.
So, maybe I’m not being really clear. I’m agreeing that when content is placed, the visual boxes all go the way they should. I’m not contesting that. I’m saying that when I’m initially setting up sizing, and if that sizing is ‘smaller’ than the default displayed box height size, the outlines overlap each other.
I’m advocating that ‘if’ a parent section/container/div is set to a max height that is smaller than the children that it contains be it a section/container, container/div or div/div, whatever flavor it is the children containers/divs should resize the height to fit within the defined section.
I get the hardcoding sizing(overflow), this was merely an excersize so I can visually see how they would stack. In my use case, I put in multiple sections, color the backgrounds, and set various heights so I can see the layout a bit more clear of what I’m trying to do.
