I have a recurring problem that is very annoying. When the size of a loaded text element becomes shorter (by changing the browser width), the text tends to disappear when it no longer fits. The element then stays hidden, even if you widen it again by widening the browser. It is terrible for UX, because it seems like an element is just not there. I’d much prefer to cut off part of the text and replace it by ‘…’. You can see it below with the word ‘verwerkersovereenkomsten’. Is there an easy way to do this?
I can do it conditionally by counting the number of characters and the width of the element and then manually adjusting the element text , but this is not a viable solution throughout my app. It is a lot of work, and rather unreliable (requires a lot of testing). For such a basic issue, there surely must be a better solution available? Help is much appreciated!
On a text element in format area you can set the height which affects how a text element is visible compared to the width.
If you put a fixed height, and width doesn’t allow for the entire text to be visible, it will cut it off and add an ellipsis if the text is not a single word (email address are a single word because there are no spaces, so if the text is not wide enough for the entire email address the entire email address will be cut).
If you don’t have a minimum height on a non-fixed height text element, then I bet Bubble has a bug because you reduce width, causing the text to be cut, then when expanding width again, Bubble has already cut the text, which it might be registering as an empty value and therefore the text element itself height doesn’t expand again.
In debugger, you can inspect the element and see the height and width, although the inspect and debugger are complete garbage when the width of the page is at a mobile width.
Thanks for your help! Gonna check this out. Ideally also with single word-elements an ellipsis would be added by Bubble if it is cut off (not sure what the downside would be, or at least make it optional), but I can take this into account now.