Dynamic height for multiline input in group in repeating group

@J805 has the right idea here. When you want everything on a page to be “height-dynamic” or what you might call “height responsive”, you need to control the height of things partly by how you have the elements set up in EDIT view.

One way to think about it is: Most elements in Bubble do have a minimum height. However, this is not a property that we set programmatically. You might say that the minimum height for an element is implied by its height in the editor.

Let’s look at an extreme example. It is hard to tell (in fact, probably impossible) to tell what this page does in run mode from how it looks in edit mode:

When provided with the ID of a thing of the right type (the page has a type called “Listing”), this page looks VERY different. In run mode, it looks like this:

So now you can see that the things we were looking at in Edit mode are:

  • A text element with header type styling
  • A multiline input (set to “stretch to fit content”)
  • Another multiline input (set to “stretch to fit content”)
  • A full-length or ext scrolling repeating group with:
    • A static element
    • A text element with dynamic content
    • An image which must be set to “not visible on page load” but that has a condition which makes it visible at runtime.
  • We note that the repeating group in Edit mode must have been set to display only 1 row or else we would have been able to tell this was a repeating, rather than a “regular” group.

Now, this is a super-extreme example. The page itself would be very hard to maintain if its one that you are still working on, because you can’t see much of anything about it!

But you can strike a balance of course.

On this particular page, you’ll see that the only things that are “constant” are the vertical spacings between elements. Those are the only heights that are preserved and “pre-set” if you will. Everything else can grow in height to be whatever it needs to be.

3 Likes