Hi there Bubble Team. I’m a bubble.io developer and working on an app using new responsive engine. There is a small problem that I have come across, I don’t know if this is a bug or I’m doing something wrong.
I have placed a text element and want it to cut off content and show dots at the end if the text increases it’s width, I have put a maximum width and a maximum height to that text element but when the text is larger than the element’s width and height, it hides instead of showing the text with dots at the end.
If anybody knows the right solution for this help me it’s urgent.
@emmanuel @adamhholmes @ZeroqodeTeam @Bubbleboy @nick.carroll @gaurav
Any help would be appreciated.
Is the text continuous (i.e. has no spaces), or is it normal written text with spaces etc?..
What browser are you seeing this in?
Also, what is the max height of the text element?
@adamhholmes I have tried using both kind of texts continuous and with spaces but have the same problem.
This the the text element
This is the layout, max width and max height
This is how it shows when text is small enough for the text elements max height.
This is how it shows when it exceeds the element max width and max height.
Ah this might be an issue with the parent container being an Align to Parent container type. What happens if you put the text box in a row or column container?
Side note: This is pretty unclear behavior so will talk to the team about how to make this clearer if it is indeed the fault of the container layout type.
2 Likes
Thankyou for your help the problem is with the continuous text, it only shows the text if it has spaces other wise the text just hides.
Why is this marked as a solution? It cannot be anything but a bug?
The behaviour is just weired!
If anything, it should just cut the word/text at max length - 3 x dots, and display that.
Not remove it! What kind of solution is that to this issue? Invisible text?
4 Likes
I’ve been running into this issue as well, and it does seem based on whether or not there are spaces breaking up the text. In particular I noticed that my longer email addresses disappear completely while other texts automatically get the ellipsis.
Any update on this @nick.carroll ? Is this a bug or desired behavior? It certainly is unexpected.
1 Like
I know its a year later but an easy work around for this is to set the data to be truncated to the number of characters your text box will fit minus 4 and then add … after your expression. This will automatically behave the way input boxes do.
Be sure to add a conditional for data that is empty so it doesn’t just show the …
1 Like
this doesn’t work since characters can have different widths.
Did anyone find an alternative solution? I am trying to display emails but they are too long to fit and instead of the … it just doesn’t show up
I found an alternative solution. Add the text using an HTML box instead of a text box. You can add your styling there as well. Here is my solution:
1 Like
Hey all, I’d like to bump this issue.
The issue really is a problem when I try to show long URLs that could be shortened with an ellipsis.
The workaround given is not as beautiful.
Has anyone found a better solution ?