If there is text in my repeating group that is lots of text with no spaces (example in screenshot below of a youtube link), then the text will overlap into the next cell instead of wrapping to the next line.
Does anyone know how to fix this? Is it a bug or am I missing something?
Make sure that “Cut off content if the element is not tall enough” isn’t checked. When checked, it causes that sort of overrun with a long text string. (There may be another issue, but that’s what immediately jumps out to me).
It’s not checked so must be something else
Yeah, long strings like long URLs will do that. (The Issue being that we have no idea where to break it, right?)
Since you know you’re going to flop down the URL (surely it’s dynamic, yeah?), just break this up into the preamble text in a text element, the URL in a multi line input (set to disabled and styled however you need — it will wrap there), and another text element for any text following.
it is part of a post that a user has made and has typed it in the middle of the text of their post. My repeating group displays all user posts and the text box is displaying current cell’s post’s text.
I don’t get why it doesn’t just put the end of the url to the next line like it would if there were spaces. What do you mean you have no idea where to break it? The width of the text box is where it should break.
More correctly, that’s where YOU would LIKE to break THIS PARTICULAR bit of text. (Aside, I get where you’re coming from, but you’ve perhaps not thought about the many issues involved in breaking text and why decisions about breaking text are highly dependent on the context of what you’re trying to achieve.) Related reading:
On that page, perhaps one of the most useful things is the very last Codepen example. Looks like this:
The CSS Tools plugin (not something I’m a big user of) probably would give you the tools you need to customize the elements on your page where this issue is likely to happen and apply whatever additional styling you need to address this particular issue.
Of course you can play around with the effects of various options directly in your browser as well using the console (as in the example below where I added overflow-wrap: break-word):
It’s a bit annoying that various Bubble elements always have the same class (like, even if you assign a Bubble “style” to a text element, which you m
ight think might give it a style-specific class, all text elements are of class “bubble-element Text”).
Anyway, you could just inject some CSS into your page header HTML to add a different overflow-wrap behavior or ellipsis behavior, etc.
To get this:
We can do the following on our page element:
Thanks you very much!
This topic was automatically closed after 70 days. New replies are no longer allowed.
