Dynamic height for multiline input in group in repeating group

Is it possible for the multiline input inside a group, in a repeating group to dynamically set it’s height based on the length of the content?

Repeating%20Group%20Dynamic

Correction in diagram: Record 2 and 3 are Expanded.

Hi @jordan6 :slight_smile: Yes this is possible by checking “stretch to fit content” on the Multiline Input element:

2 Likes

@fayewatson Stretch to fit content is checked. This input is disabled is also checked. Don’t want the content of this field to be modified on this view.

The multiline input appears as the same size for every record. Not sure why it isn’t working.

Does something else need to be checked?

Adding Details for Multiline and for the Group it is in. The Group is part of repeating group field

Also, I noticed what has helped for me is to make the Multiline Input your minimum height, it should expand when you need it to but not really shrink. So make it like 20 pxls in height and see if that helps. Usually helps me, maybe in your case it would help too.

@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

Hi, I have an update.

The multiline input field was in a Group that had a “Collapse this element’s height when hidden” checked. The intention was to click on the line and have it expand with the multiline input content.

When the multiline input is in the group, the multiline field stays at a fixed height, that is, stretch to fit seems like it’s ignored. When I drop the group. The Multiline input content expands appropriate according to the data (which is what I want), however, the everything is expanded on view (i.e. I don’t have to click on the line to expand.

Are these things mutually exclusive?

I want to click to expand and then have the content of the multiline input field expand dynamically.

Even stranger, if I set the Group (the object containing the multiline input field), to be “This element is visible on page load”, then the multiline fields expand dynamically, and the toggle expand/collapse, works appropriately. However, if I disable “This element is visible on page load”, then it no longer works.

Shouldn’t the behavior be consistent? :thinking:

1 Like

Can someone explain the rationale for using a multiline input vs a regular text element to achieve this result, ie, an element that expands height based on text contents? OP starts with that determination already made, apparently based on other factors not mentioned or not relevant to this particular question.

Wouldn’t a regular text element expand (and shrink if its shrink option is selected) to fit its contents in a similar scenario? Just wondering and trying to learn Bubble nuance.

What are the benefits of using a multiline input vs. text element in a scenario like this…because @keith uses it too…there must be a reason that is not obvious to me.

Anyone here know how you can make an image expand to fill the size of a cell, while the RG’s rows are actually quite small? I’ve tried putting it into a Group that collapses, but then all of the other cells are too big if they don’t have an image in them.

Any help would be greatly appreciated!

@mccjon

you need to make your image the same size of the cell by setting the height and width on the image. Make the X and Y coordinates 0, 0

The RG I am assuming is not fixed width which is why it is expanding and shrinking. The image should also be not fixed width.

Your image also needs to be processed with imgix:

you find process with imgix by selecting “more” after you enter the images dynamic information (look at the white and yellow text to see what I mean)

Also make sure image is set to rescale as well.

You would use this as well when wanting to make an image circular

1 Like

I am having an issue that I shared in another post I created on a very similar topic and hoping somebody might have some tips…

Any input would be much appreciated.