[New Feature] Breaking Change - Text elements always handle leading whitespace

cal · 2020-11-23T20:34:33.397Z

Hello everyone,

We’re about to release a small but important breaking change concerning display inside of text elements. Consider the following example:

Screen Shot 2020-11-20 at 2.05.32 PM1310×488 29.4 KB

Notice how the text I want to display has a newline at the beginning, but the text box isn’t displaying that. We would only display the leading newline in a small edge case, leading to seemingly inconsistent text rendering. Now, with Bubble version 10, we are always handling it correctly:

Screen Shot 2020-11-20 at 2.05.50 PM1270×470 27.7 KB

There are other small issues with whitespace that this fixes, such as paragraphs with leading whitespace, etc.

For those familiar with CSS, or want a more technical look, we are applying the “white-space: pre-wrap” property to text elements always (previously, we were only applying it in certain circumstances). See here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Once released, to opt in please visit the “Versions” subtab of the Settings tab to upgrade, and fix any issues in existing layouts you may have from this change. The “:trimmed” option on text may help if you want something similar to the old behavior, but I would manually confirm your text still displays the way you want.

lakossaack · 2020-11-23T20:55:58.947Z

@cal Nice! I rarely add leading whitespace, but do sometimes add a couple extra lines after a text. Will this impact those elements?

cal · 2020-11-23T21:24:50.633Z

I don’t believe it should impact those elements, but when this is released you can try it out in your development version to make sure, and make tweaks to what is being displayed in the text elements.

hatagoeiseb · 2020-11-24T18:00:25.518Z

I love this.
Thanks.

alejandrowunderlich · 2020-11-24T18:12:30.518Z

This is great. I would like to suggest also supporting proper vertical centering, and bottom alignment of text. It can be achieved via CSS, but it’s an extra step. For RGs with variable-length titles, vertical centering or bottom alignment is a must for a consistent UI.

charles4 · 2020-11-25T18:39:36.999Z

Totally agree with you!!

renatoasse · 2020-11-26T16:33:57.187Z

Hey @cal,

Today I’ve noticed a bug that didn’t exist before, it probably has something to do with this update.
The “rich text editor” that you access by clicking just below the text field is buggy.
Whenever I have dynamic data there, any change I make on the rich text breaks the text layout, and changes dynamic data into static data:

I have this text setup manually:
Now I’m just going to make the “ID” bold:

image949×416 33.8 KB
Aaaaaaaand, it broke:

GuyRoss · 2020-11-27T22:04:33.188Z

You guys rock. I love this platform.

pat3 · 2020-11-28T03:51:44.808Z

renatoasse:

The “rich text editor” that you access by clicking just below the text field is buggy.
Whenever I have dynamic data there, any change I make on the rich text breaks the text layout, and changes dynamic data into static data:

I can confirm/second this behavior.

cbmerwan · 2020-12-10T22:36:04.301Z

Yes that is good!

Btw, is there a way to force linebreak in a dyamic data text thing ? I really need this