Text wrapping inside button

Is there a way to make a single word wrap inside a button?

I’ve got a button that’s dynamically set to the alias of the current user’s email address. When it’s got a lot of characters it overruns the button.

this one should read “trackwelltestdev10”

If you replace the button element with a text element, that should wrap the text (You can style the text in the same way as you would a button).

Maybe I’m doing it wrong?

I tried making a text box and setting some conditions.

  • when this element is visible
    – align text center
    – center text vertically

But the vertical alignment doesn’t account for the fact that the text is wrapping to a second line. Only the starting line is centered vertically. The experimental text box is the red text on top of the original button:

Oh no, I don’t think you’re doing anything wrong; I think you might need to adjust the text’s style for when the text will wrap. For example, the condition on the text element could be “when text:number of characters is greater than [maximum number of characters before the text wraps]” --> center text vertically = unchecked. That should keep both lines centered (and then add vertical/horizontal padding if needed)

All I see under the conditional “when” for “this text” is clicked, hovered, pressed, and visible. How do I build an expression with “number of characters” in it?

It would be the dynamic expression that you have in the Appearance tab. For example, if the text was displaying the Current User’s Username it would look like:

Right, so, that technically works

Except that now I need it to act like a button. You know, like everything else in the UI that actually is a button.

Do I have to manually rebuild all of the button conditions into this text box? Such as the hover and pressed states? If so do I need to have this one absurdly customized element just to get a “button” label to word wrap?

You can create a text style out of the text element with the newly added conditions. Then convert the other buttons into text elements and apply that same style.

1 Like

Is there any way to access information related to the UI?

For example, can I build an expression to truncate the text in a button element when the displayed width of the letters is wider than the displayed width of the button? That kind of thing can vary by font, responsiveness, browser settings, etc.

Unfortunately element dimensions are not dynamic nor are their properties accessible to use as part of conditions. You can read a page width though.

You also have some control over responsive settings based on the element’s container’s width, but in your case with this button, I think Faye’s solution is your best option.

Does that mean there’s no reason to expect that buttons might be updated to word-wrap automatically? If anyone needs word wrapping they should just replace their buttons with custom text fields?

On a related note, is there a way for the community to share a library of components? For example, I also fixed the built-in header bar to do simple stuff like hide the login/signup popup instead of leaving it on screen and hiding the “log in” button when the user is already logged in. Stuff the header should have been doing anyway. At a minimum, I’d like to share that between my own apps, but it seems like a shame to make any new Bubble devs rebuild the same functionality if there’s a way to post that reusable element publicly.

We can keep an eye out for text wrapping on buttons. That’s up to the Bubble team!

As far as element “libraries”, this is exactly the aim of future plugin marketplace capability. I believe users will soon be able to create element/workflow plugins, which would cover this scenario of giving other users a shortcut and not having to reinvent the wheel every time for common features.

I guess there’s also something to be said for Bubble keeping things less pre-built and more open to your own customization as that’s what makes this platform so valuable to me. You make a fair argument for the signup template not including things like log in button visibility when current user is logged in though.