Container Width vs. Page Width

[ladd0393]

I was hoping to use conditionals that access the parent group’s width as opposed to the page width. It appears that this request has come up a few times in other threads:

New Responsive Engine Feature Request

Feature Request Provide access to the Container/Parent Width inside of our Conditionals. As it is right now we have access to the page width in order to setup some conditionals. As a way to make things more flexible, having access to the container/parent width inside of conditionals would be great. In the original responsive editor, one of the pain points was around the fact that hiding rules relied on the container width, while conditionals relied on page width…in the new engine to have the…

New Responsive Engine Feature Request

@nickc it would be great to get back the function to click on an element in the responsive editor and see the size of that element. In the legacy engine we had the ability to click an element and in the left side see the size of that element. In the new responsive engine this is just as important to assist with deciding what types of conditionals we need based around the size of child elements at different page widths. Would also be incredible to get the ability to set a conditional expression …

Hiding elements based on width on new responsive engine

The element is contained within a group which behaves as responsive (row). The width of the group is not analogous to the width of the page, i.e. As the page gets smaller, there are points where the group may become larger, then start becoming smaller again. One more reason is that atleast the way I’m working, I design each part of the app as a reusable element. So that means that the same element can be used in a page as a 320px width element while in others as 600px or more and this is irrel…

I’m guessing there’s a workaround using JS or CSS. Does anyone have a good solution for this, or know if Bubble plans on adding it as a feature to the new responsive engine? I believe the legacy editor had a “Hide when parent width” option in the responsive tab.

[rpetribu]

If you container width is not fixed, it will have a direct relationship with you page width, correct? If so, you don’t need to know the container width, just the page width.

Example: I want to hide my container when its width is less then 300px.

What you can do is to open your Responsive Editor and keep decreasing the width of your page untill you reach the point where your container has 299px. Check the page width at this point and use it as condition.

It helps?

[ladd0393]

For my particular use case I have other groups on the page that can be shown or hidden. So the width of the parent container is different depending on what elements are visible, and can change irrespective of page size.

Assuming these other groups are fixed width I can add conditionals for each visibility setting. However, if these other groups are responsive, I would need to know the width of the parent container. I’m sure there are other scenarios as well.