Text element in group cutting off the top of returned text

Hey everyone,

In my application I have a floating group with a text element inside of it that returns text from an API call. I want to have the floating group be a fixed height so it won’t push other elements of my app into my top or bottom navigation bars if the returned text is too long. Ideally, I would like for the text element inside of this group to expand vertically as needed and allow users to scroll. It’s currently allowing users to scroll but it always cuts off the first few sentences of the return text. Is there any way for me to fix this?

Can you send a screenshot of your property editor window for your text and and for the floating group?

@paul29 sure, here are some screenshots . Here is the screenshot for the group:

and here is the screenshot for the text element:

any help is much appreciated!

Can you also send a screenshot of how the element renders. Showing what you’re talking about with cutting off the first few sentences?

@paul29 here is how it currently renders:


It will cut off the head of the returned response. sometimes it cuts off the bottom as well. ideally i want users to be able to scroll through the entire returned message without any loss.

I was able to short term fix this by just putting a bunch of new lines before the text element find and replace in the editor. Please see the screenshot. I would ideally like to find a better solution.

And that screenshot you sent of how it renders. That has no scroll at all or some scroll?

it has some scroll. it will allow me to scroll down and see the body and signature of the text returned, but the header and subject line is always cut off.

Try to remove the empty lines you inserted before the text and uncheck the option to center the text vertically.

You have a minimum height on your text element which is larger than the min height on your parent element. This is why it is cutting off the first few sentences. Change the min height of your text element to 200 or the min height of your group to 300

@paul29 @Newed I did both of these things and it works now!!! Thank you so much for the help. I really appreciate it.

1 Like

@paul29 @Newed after some additional testing, the header and outro are still getting cut off slightly. I applied both fixes you suggested. Is there anyway to fix this without making the floating group any larger? I just want the text to appear clear in the group and users can scroll down to view the entire message. Ideally I want to make the font a bit larger as well on the returned text. its at 10 now but if i set to 12 it really cuts off a lot of the message.

I don’t know what you’re doing wrong, technically this is simple, but here are some possible causes:

If the layout of the parent container is set to “Aligned to parent” and the child is in the center region of the grid, depending on the height of the child element and how much it expands with dynamic content, it will expand up and down. As much as the parent container has the overflow option activated, initially its content will be displayed “cut”, both at the top and bottom, if it has enough content to expand vertically more than the limit of the parent (apparently this is not the case by the prints you sent, but check again).

The same thing would happen if the parent group (of the text element) is not aligned to the top of its own parent element, which in your case is probably the floating group. In the print you sent, it is centered, this could probably be the reason, because in the same way as I mentioned, when centered, if the internal content is greater than the height of its parent element, it will center this content, cutting it o in both directions vertically, however the overflow will allow you to be able to access the end of the content but the beginning will remain cut off and inaccessible.

Here is an editable example: Example

Play around with the options to change the group alignment to “center” and “top aligned” and watch what happens in the preview.

Also change the layout of the group to “Aligned to parent”, and change the alignment of the text on top, center, and bottom, and see the behavior.

As @Newed mentioned, this is just a trial and error thing. What you’re trying to do is definitely doable. You just have the wrong combination of settings and without seeing whats going on (even with screenshots it’s hard to diagnose), it’s really hard to knwo what to tell you to do specifically. I’ve been doing bubble full time for over three years now and even to this day, I still run into simple situations where visually, it’s not doing what I want it to do. Then after 10-15 min of just playing around with settings, you eventually stumble upon one setting that was causing the whole issue.