Multiple Block Visibility Conditions

First of all, the ability to control visibility of each block within a page layout is a great feature.
However, I’ve been trying to use 2 conditions at the same time with no luck like

isView AND screen.width > 1024

They both work fine individually but wondering if multiple conditions can be grouped together?

Also, another sort of unrelated point I wanted to bring up was, when a block gets hidden this way. It still consumes the same space it consumed when it was visible. I don’t know if its a good thing or not but when I for example switch to mobile, it looks weird.

1 Like

Yes, I’ve noticed the same issue you mentioned — when a block is hidden this way, it still takes up the same space as when it’s visible. This can indeed look a bit off, especially when switching to a mobile layout where space is more limited.

To resolve this, the best approach would be to apply custom CSS

1 Like

Your expression is wrong; it should be:

isView && screen.width > 1024
1 Like

Not sure what the best solution would be here… I suppose that on mobile all blocks should collapse together. On desktop, that could be a bit tricky… @jfortun what do you think about this?

@prakashg have you tried any custom css for this?

I think using custom CSS would be a bit chaotic here, as the underlying grid library computes absolute block positions and dimensions. I could be wrong, but I don’t think custom CSS would be of much benefit here. If we decide we want to change this behaviour, it’ll need to change in the code base

My two thoughts on this one:

  1. Unfortunately, the empty space is most likely staying, because otherwise it has an impact on the position of all other blocks as well. We could think about adding an option on the block, which would remove the space it takes up.
  2. If possible, you should use different layouts for such cases, so you can design the layout itself for that layout, so that there won’t be any empty spaces.