Hi - I can “hack” the styling of an html element to make the text size be based on the width of the viewport, or add conditionals to make the font size change as the page width changes, but I haven’t yet found an elegant solution to a problem I have. Maybe someone can help.
I have a box in a responsive RG. The box holds a title in a Text Box. Because I don’t want the box height to change, but the titles of my things do change in character length, I’m currently forced to use “cut off content if element is not tall enough” on the Text Box. I’d like to know if anyone has managed to change the font size dynamically to make sure it always fits, but won’t stretch and change the size of the parent.
Not a flexible solution (especially if the repeating group isn’t fixed width), but you could apply conditional breakpoints using the character count. (Ie. when Title’s:number of characters is ≥ n, then font size is X. Then repeat this through several character count breakpoints).
I’d recommend running a few simulations to figure out what the exact character lengths are that correspond to your repeating group’s fixed width and where to set the breakpoints.
Better solution than basing it on page width thanks! I’ll mark it as solved.
Would multiple positive conditionals slow performance on long lists? I mean the way you framed it, with a title of 61 chars, both conditions are true. The top one would override the bottom one but I’m wondering if BUbble will go through all conditionals and apply the 20 first, then the 16, which would inherently slow the process down. I donèt think that would impact small apps, but with 100s of entries in the rg, would it significantly increase load time?
However, I was thinking of a js script that could return the width of the container and base the em or px text size on it. I may try it when I find some time, but if anyone has already tried I’d appreciate the help
My bias is towards recommending solutions that can be implemented within Bubble’s editor (ie. without Javascript workarounds) to keep things accessible. Though I could see a Javascript solution working along those lines (see this example). (Nudge, nudge, plugin builders).
With repeating groups, I feel that the larger consideration is the total number of rows you initially display, how the data is structured (ie. do you need to traverse multiple tables to get the displayed value) and if you’re displaying large things (ie. images).
Beyond that, this type of conditional logic is relatively minor, and I don’t feel it would slow performance drastically. Though I agree you could make it cleaner by placing bounds (ex Title is ≥ 40 characters to < 60 characters, then X size, etc.), so cycling wouldn’t happen.
