SOLVED How to make elements "go up" if previous one is empty?

Hi there!

I have a group composed of many distinct text elements, like:

Current Page Trip’s description
Current Page Trip’s duration
Current Page Trip’s X
Current Page Trip’s Y
Current Page Trip’s Z

These elements appear one above another on the front.
Problem: when one is empty, I have a blank area, it’s very disgracious and takes useless space.

Solution I found: have them in only one element, instead of 5 different one, with a break line between each.
But it’s not working, because I have conditions that are specific to each of them, I can’t gather them in only one :confused:

Would it be possible to keep these elements separate so that I can keep my conditions to each of them, but make the next element go up if the previous one is empty for example? (granted they’re all in a same group).

Thanks!

I have a portfolio that is not shown when empty.
This will do the trick for your. So just put the condition to not be visible when Current Page’s Trip’s X’s content:count is 0

Thanks @mvandrei

Yes I’m already using this trick, when it’s only one or two elements it’s perfect, but in this case I have:

  • Info 1
  • Info 2
  • Info 3
  • Info A
  • Info B
  • Info C

What I’d like to do is that, when Info 2 and Info A are empty, that all the other info “collapse” and move up, so that it’s not:

  • Info 1
    BLANK SPOT
  • Info 3
    BLANK SPOT
  • Info B
  • Info C

But:

  • Info 1
  • Info 3
  • Info B
  • Info C

Let me know if that helps to understand.

grant me access to your panel. If I mess something up I have ‘undo’ button :stuck_out_tongue:

If you put each item into its own group, you will have access to a command called “Collapse height when hidden.” This will do what you want. So put each text in its own group, and check that box. Then, when that text is empty, hide the group.

2 Likes

It exactly does the job, thank you very much @andrewgassen!
I guess there is no way of doing the same thing but horizontally? Like “Collapse width when hidden”.

Info 1 Info 2 Info 3

That would work if placing them in the same element but same problem, we can’t apply conditions to each of them if in a single element.

Thanks also @mvandrei for trying, it’s appreciated :slight_smile:

yeah, sorry. I am new to bubble and programming. I will help better some day!

1 Like

There’s nothing built into Bubble that let’s us collapse widths, unfortunately. You might be able to use some of the CSS I’ve seen floating around the forums, but other than that, there’s no way to do this with Bubble’s native tools.

1 Like

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