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?
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.
@paul29
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.
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 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.
@modpilotofficial
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.
