Hey there.
So as per the title, I’m trying to figure out how to hide an element based on it’s width, or page width, using the new responsive engine.
The obvious way is to use the conditional for page width BUT the problem is that if the element is used inside any responsive layout (such as a reusable element) then the page width is a bad indication on whether the element needs to be hidden.
Are there any workarounds for this?
Thanks,
P
Out of curiousity, why is the page width a bad indication on wether the element needs to be hidden? I don’t have this experience.
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 irrelevant to the width of the page at that moment. This gives me tremendous flexibility for designing my pages but in order to make full use of this method, I need a better way of handling element visibility.
In order to truly capture the size of the element, we need this to be tied to the actual size of the element, not it’s group.
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 irrelevant to the width of the page at that moment. This gives me tremendous flexibility for designing my pages but in order to make full use of this method, I need a better way of handling element visibility.
In order to truly capture the size of the element, we need this to be tied to the actual size of the element, not it’s group.
This for sure… I’ve been having the exact same issues.
I hope they add a conditional for ‘Container Width’ as well as the current one for ‘Page Width’ once the new engine is out of Beta (which would be the true equivalent of the hiding rules on the old engine).
That is serious use of reusables. I understand now what you mean.
As a temporary work around you can accomplish this with the toolbox plugin “Run Javascript” with some Javascript, “Javascript to Bubble” element and a workflow:
Use the event triggered by the “Javascript to Bubble” element to f.i. set a state and use conditions to do what you want.
That does sound like a solution. Unfkrunatekt I’m not adept with JS at all and will try to avoid it.
I got the same problem. This here just seems to be gone:
@bubble team: any plans of adding this soon?
There are ways of adding a CSS stylesheet and using groups of conditionals to hide elements: (if page width < 400, give elements a css class attribute, and then hide them)
But this basically defeats the whole purpose of building responsive pages on the new engine. Still very disappointed with the current new engine-- doesn’t at all achieve mobile responsiveness.
Agree though to be fair I’m quite liking the new responsive engine. That being said, I’m not building anything terribly complex.
And yes, I think needs to be added.
Its been a few months so this might be new but there is a way to do it - at least based on page width.
This condition
Accompanied with this setting
does the job.
