Shouldn't text be aligned along the bottom rather than the top? (Screenshot attached)

In the screenshot below, you’ll notice that the 3 different texts all line up along their top edge rather than their bottom edge (I put the 2 shapes there to accentuate this).

22%20PM

Is that normal? Because it means when you use multiple text elements (with different font sizes) on the same line, they don’t line up how you would expect. E.g. It makes table-like data look really bad.

Preview: https://phil-testing.bubbleapps.io/version-test/text-alignment
Editor: phil-testing | Bubble Editor )

2 Likes

@bubble am I wrong about this? Shouldn’t text be bottom-aligned instead of top-aligned?

1 Like

I think normally yes, but websites naturally flow downward. It is weird but I think that is the reason it is set like this. Just my theory. :slight_smile:

This was a design choice that we made when building core Bubble and cannot change at this point, because the change would break every app. The thing to do here is to add vertical padding as needed.

How does that work with dynamic text, where we can’t determine the length?

I understand the decision, just curious if there’s a workaround

Length wouldn’t impact the nature of adding vertical padding. If we’re missing context, please send a bug report with further details to support.

I tried adding vertical padding, but it doesn’t solve the problem for dynamic texts. Vertical padding is just a fixed number, and text disappears if the text is bigger.

I have two use-cases of dynamic texts.

  1. Overlay text at the bottom of image in a gallery. If I make the text box very big, then when the text is small, it floats up. If I make it small, then in case text is long, it makes the size of whole box bigger, causing imbalance with other boxes with small texts.
  2. Tooltips: I want some tooltips to show above elements on Y axis. When tooltip text is longer, the tooltip box becomes bigger downward rather than upward, and it ends up covering the element itself. If I keep the tool tip box bit higher, then when the tool tip text is small, the tool tip looks hanging in the air and doesn’t look connected to the element in question.

Are there any workarounds?