Forum Academy Marketplace Showcase Pricing Features

Why might responsive not hide a group when its "hide when" rule is triggered

I’ve set an element to hide when its parent element is <430px, but it doesn’t hide even when the page (and parent group) are smaller. Any ideas for what could be causing this?

I ran into this a week ago I think. I ended up rebuilding the element and then it worked. All the editing/testing I was doing to try to get things working must have glitched it.

If that page is shareable, would be great to have it go to Bubble bug reporting so they can figure it out. With mine, I had already fixed it, and it would have been hard to replicate.

(FWIW my main observation on the responsive editor is that “fixed width” isn’t actually fixed width. It will still shrink. The only difference seems to be that with fixed width, Bubble will shrink the margins before shrinking the element (vs. shrinking the element and then the margins.) To achieve true fixed width involves limiting the width of the page. It’s probably meant to work this way, but since it’s not documented, a beginner learns it the hard way).

1 Like

I rebuilt it and it still doesn’t work :frowning:

Good idea, though. That does often solve this type of Bubble bug.

It could be the parent width <=430, not the page width.

Yes, the contain (i.e., parent group) is also 342px, which is why I circled that number as well.

Oh. Sorry. :man_facepalming:t2:

Hmm :thinking:

Is the get started button right aligned as well?

Also, are there any hidden elements on the screen?

Any way to share the page to take a look? Maybe copy the element to a test app?

Sometimes weird stuff like this happens when there are overlapping elements. Do you have anything overlapping? Something hidden?

Figured it out. Bubble bug.

The parent group was basically an element that goes the full width of the page. I had it set to fixed width. Bubble’s responsive showed the element shrinking as the width of the screen shrank so that it was, essentially, the same number of pixels wide as the page.

Changing that to be non-fixed width and having it shrink only to 99% of it’s normal width somehow enabled this to work even though the actual width of the parent element was the same in almost all scenarios, including those where I had wanted the target element hidden.

So you mean, in reality, the parent width wasn’t actually shrinking even though bubble said it was?

That’s why you couldn’t see the right side red line of the login button. That’s what was telling me that the parent element wasn’t really the right size. I think Bubble has been trying to automatically make the page responsive even though it isn’t set that way.

The parent group was shrinking. In fact, two elements were forced onto a 2nd line because the parent group was shrinking as the page shrunk.

The “hide when” rule wasn’t working because of a bug. Seems there’s a workaround to make fixed width elements variable width instead and set max width = 100% and min width = 99%. Nearly identical, and it resolves this Bubble bug.

So weird. Thanks for sharing! Glad you figured it out. :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes