Conditional formatting to achieve responsive repeating groups

Need help Responsiveness
1

Hi there,

I’m trying to make a repeating group responsive by using conditional formatting.
I decided to have the so called desktop version of the repeating group by default. That one disappears with a hiding rule when squeezed smaller than 900px. However, thereafter I try to reveal Tablet and mobile width repeating groups with conditional formatting (When Repeating Group Desktop is not visible --> This element is visible. And similarly with Tablet/Mobile width repeating groups. However, for some reason all three elements are visible by default, and only the hiding rule is working, while the conditional formatting is not. In other words, in Desktop mode all 3 elements are shown, in Tablet mode both tablet and Mobile are shown, and in Mobile only the mobile version…

Any tips and tricks to get the conditional working…?

Brgrds,

Jonas

2

Have you tried using debug mode (i.e., adding ?debug_mode=true to the url) and then selecting each group to see how it’s conditions are being evaluated?

In general, this is a great way to figure out how Bubble is interpreting the code that you’ve written which is often our first step in debugging our own code when we don’t know why it’s not behaving as we intend.

3

Hmm… I have not tried using debug mode…
I’m relatively new to bubble… would you be able to guide how I should add the debug mode…?
Under the conditional formatting?
Thanks for your help and your prompt reply!
//Jonas

4

The debugger only seems to reveal the condition in a red colour. I guess signalling the conditions does not work…41

5

The logic/code a bit more in detail…

  1. Hiding rule to hide “Desktop” repeating group
    05

  2. Conditional formatting to reveal “Tablet” repeating group
    47

  3. Hiding rule to hide “Tablet” repeating group
    03

  4. Conditional formatting to reveal “Mobile” repeating group:
    35

According to my logic this should work (however obviously it doesn’t :D)
Thanks for your support again…

6

Are the groups you’re setting to be conditionally visible - are they set to be hidden by default?

7

Note - in the debugger, if it show’s in red that means bubble is evaluating the results as “no” and if it’s green then it’s a “yes.” If you click on the logical condition (e.g., RepeatingGroup Class Tablet isn’t visible) then you can select each piece of that condition and Bubble will show you how it’s interpreting it.

8

Hmm…
Don’t think they are hidden by default… Where could I try that out?
Thanks again!

9

Screenshot_643
Screenshot_643677×1536 60.5 KB

10

Thanks a lot… It fixes the problem for the Mobile Repeating group in combination with an additional hiding rule. However, for the Tablet repeating group it does not as the tablet repeating group should be hidden under two circumstances - an upper width as well as a lower width… Bubble does not seem to allow several hiding rules…
//Jonas

11

Somehow the conditions did not eventually work. Might have been too many of them :blush:
However, I fixed it by only using a Tablet width and a Mobile width with opposite hiding rules. One that is visible above 600px and one that is visible below 600px. Seems weird that the hiding rule does not allow a higher than and a lower than conditions (< x <).
Still, thanks for your help.
//Jonas

12

How do we get to choose a starting and ending and intermediate color without having it set to gradient?

13

Having a different starting and ending color makes it, by definition, a gradient.

14

Sorry, I made the connection of starting and ending with conditional formatting and responsiveness to somehow imply the starting and ending color is different based on conditions set for responsive behaviors.

It’s been a baffling day trying to get just the basic approach to responsive design.

15

Yeah, responsive is really hard at first. The key is to:

  • Use the explain margins button to have Bubble explain why it’s working the way it is (so you start to learn and infer how it’ll work in different scenarios)
  • Use groups to combine elements and align them similarly.

The good news, eventually it starts to make sense and making your pages responsive becomes straightforward.

16

I decided to start designing for products that will be used primarily on mobile in that regard, meaning designing at first for a small screen.

Then, I’m making use of the max width and min width percentages to allow the elements to stretch to fit the screen as it is larger. I’m also making the page itself equal to the width of the small screen view and enabling max width on it as well.

So far I’m getting some of the results I want and just now about to apply more to a twelve month calendar view. Will post some screen shots when it’s done to hopefully help others wrap their heads around it.