Conditional Expressions and Current Page width


I think this might be a bug but I wanted to check with you all first. I have many conditional expressions that are doing things like hiding an element based on current page width.

There is a 7px discrepancy between the current page width you define in the editor and the browser width. I think this is because of the side scroll bar adding to the browser width. For example:

  • In the editor, I have the conditional expression to hide an element when Current page width < 1035.

  • This conditional expression triggers when Browser width < 1042.

The strange behavior I just found is that the conditional expression is not triggering under these conditions:

  1. Page loads and page refreshes only.

  2. The browser width just so happens to be between that 7px band (1035 - 1042).

However, if you resize the browser by even just 1px then the conditional expression triggers, it just doesn’t trigger if the two conditions above are met. Users, of course, won’t know to resize their browser and it can create some very awkward UX when you consider all the conditionals I have that are doing various things at various page widths.

Am I doing something wrong? Is this a bug? Any help would be appreciated.

Hi @bensonlangley ,

Without detailed knowledge of your page layout and element settings, it’s hard to say if it’s a bug, but my first thought is to wonder if you might be able to simplify (or even eliminate) some conditional logic by better leveraging various elements’ responsive settings.

If that’s not an option, something to keep in mind is that you can also reference other elements’ widths within a conditional. So perhaps referencing a container’s width (instead of the page width) might help with the issues you’re encountering.

And lastly, just FYI, responsive breakpoints are on Bubble’s roadmap; so altering layout based on page width should become easier when that’s available.

Hi @sudsy ,

Thanks for the response, I’ve read a lot of your posts on this forum before.

If by this you mean setting the proper container layouts with min/max widths then yes I’ve done that but in certain cases it doesn’t produce the desired effect I’m looking for so I use conditionals to create something more custom.

Great suggestion! I just tested it using my top-level container which is basically the same as Current page width and that strange issue does not happen anymore.

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.