I have elements that are set to be 100% of the container. I also want them to have margins, however, when setting margins on the left or right of the child element that is set to be 100% width of the parent container, the child elements go outside of the parent container.
How can we make it so the child element will stretch to fit the container but respect the margins and maintain the same total width as the parent element?
You can do this with multiple containers. You have a parent container A, a child container B, and your content inside that.
You set A to be fixed at 100%.
You set B to have whatever your margins are and “fit width to content”
Note that if your content isn’t big enough to stretch B all the way out, then this won’t work. That might be OK if A and B don’t have any inherent styles, but if you need A and B to actually stretch to 100%, you may need to ensure your content is big enough somehow.
Thanks for the workaround. Will give it a whirl. Was kind of hoping the new flexbox system would reduce the amount of containers container containers to get some simple design features…seems like I’m using more containers in the new flexbox system than I ever did in the legacy system.
Would be great to just get the margins to be included in the calculation Bubble performs for the 100% min width settings. That would really make it so the new flexbox has greater potential for page load performance as it would reduce the need for unnecessary containers containing containers.
As someone deeply familiar with CSS, I can see why they’re limiting things. Every feature they add (e.g. the ability to toggle whether margins count towards 100%) is essentially bringing another CSS property into Bubble. (In this case, Box-sizing.* ) If they don’t draw the line somewhere, Bubble will eventually just become a GUI copy of CSS.
Personally, I’d like that, but I get that’s not what Bubble is about. So they’re trying to find the features of CSS that are most important.
Personally, I think padding would be pretty key, as well as media queries.
Beyond that, for advanced users, they really need to add the ability to add a CSS class, so that those of us who want to can just write our own custom CSS and stop bothering them to add every damn feature of CSS one at a time. 
* it’s not really box-sizing because margin is never counted towards the width in CSS, but for Bubble, what they call margin behaves more like CSS padding. I think it was probably a mistake they’ll have to correct eventually. Having both margin and padding are fundamental to layouts.
Hey @boston85719, have you tried setting Min width to zero (or removing that setting under Conditionals if it’s already set to less than the parent in the Layout tab) and then making sure that the Max width setting is inf?
In my experience, as along as…
…then the element will automatically stretch to the width of the parent container while respecting margins - i.e. taking the margins into account.
Â
Â
Your screenshot shows that the width of the element has been explicitly set to 100% of its parent’s width, so what you’re seeing is exactly that, and it’s what I’d expect to see - i.e. the element is the same width as its container.
FWIW, I’ve never needed to nest elements to get them to “fit” within the parent, and I have found that, in general, FAR less nesting is needed with the new responsive engine.
Anyway, if my suggestions don’t work, please share the Layout config of both the parent container and its children, and I’d be happy to take a closer look.
That’s pretty cool. 100% width (minus margins) is a really sensible default.
I dont know why bubble refuse to implement padding, or to use VW and VH as measures. They are a lot of steps behind the standards of web technology.
Awesome. Thank you for that. Works perfectly.
Padding is coming, as are breakpoints. AFAIK, there is no timeline on these features, but they are mentioned as being on the roadmap [somewhere] in the announcement mega-thread. 
Amazing!
This topic was automatically closed after 14 days. New replies are no longer allowed.
