I have been reading through the forum to see how best to accomplish this, but cant seem to find anything.
I have a page with a lot of content that I want to truncate and add a read more button. In a repeating group this makes sense. But this is just a text field with a lot of rich text. I see the “shrink the element” and have it checked, but cant truncate the text. Any working solutions, suggestions?
Thank You!
Why can’t you truncate the text? I may need to see your editor.
I cant truncate it because it’s not a repeating group. It’s just a text box.
To be clear, it’s a text element (not a input field) and it’s static text? If so, this is an easy fix.
Yes, strictly a text field with text pasted into it!
https://dbdesignshelp.bubbleapps.io/version-test\
Start off by creating a state (number)
The text field’s initial content should be the shortened version you want. Then create a conditional that displays all of the data when the state changes (in my example, it changes from 1 to 2).
Make sure the text element’s height is the absolute minimum height. In this example, it’s 19px (14px font size and the 1.4 line spacing determined this).
Then just create the See More button with 2 separate workflows. If state is 1, then make it 2. If state is 2, then make it 1.
No need two workflows. A Boolean toggle in bubble is “Boolean’s value is “no””. So a change data operation that sets:
Boolean’s value = Boolean’s value is “no”
Flip-flops the value between yes and no.
Away from my computer, but you CAN do this all in Conditions tab. Basically, you set up a text element such that the default text of it is:
SomeTextThing:truncated to whatever SEE MORE…
That will be your shrunken state. “SEE MORE…” is just text which you can format to LOOK like a link, but in fact the whole text element will be clickable to shrink/expand. (This is actually usually what you want anyway.)
Now, create a custom state on the text element. I like to call it “expanded” or similar. This is the boolean ((yes/no) that we will toggle on click.
Two things left to do:
On the Conditions tab for the text, create a condition for how u want the text to look when expanded. Condition is:
WHEN This Text’s expanded…
Change text content to:
SomeTextThing SEE LESS…
(This is your expanded state, see?)
Now we just need a simple workflow:
When Text Element is clicked…
Element -> Set State… This Text’s expanded = This Text’s expanded is “no”
VIOLA! Text that magically expands/shrinks on each click.
This topic was automatically closed after 70 days. New replies are no longer allowed.
