Any way to move an item relative to another?

I’m trying to include dynamic text in this box (from the organizer) and want the bottom right quote to be in-line with the end of the text. Right now, I have it in a group below the text. It looks okay in this image, but gets worse when the last line of text only goes half-way across the page.

Any other ideas for how to move this icon dynamically so that it’s in-line with the last line of text (not below)?

Thanks,
Scott

If this is a standard Bubble Text element, you might be able to use http://fontawesome.io/icon/quote-right/ inline as [fa] fa-quote-right [/fa]

If this is a HTML element, you should be able to inline on a <p> tag with font awesome. I’d recommend this so you can have more control over formatting. You will need to set a CSS line-height to get it inline and sized appropriately (might be difficult seeing the line height of your content is pretty short).

1 Like

@sridharan.s have you looked at the option in the text element called “shrink the element height if the text gets shorter”? You could also try using a floating group relative to the text box and put the icon inside the floating group.

1 Like

Floating groups only float relative to the top of the page or bottom of the page, right? (or, am I overlooking something)

Sorry @sridharan.s I meant to write Group Focus. You can set it relative to the text element and then setup a workflow to show the group focus when the page loads. Then, if you have the “shrink the element height if the text gets shorter” box check on the text element, the icon should move up and down with the text box as the text gets longer or shorter.

2 Likes

Thanks! Yeah, I’ve been playing around with that approach. Seems promising.

One challenge - when someone clicks anywhere on the page, the group focus hides. So, the quote disappears. Seems like there’s got to a solution for that. Will try a few things.

I set a workflow to run anytime the Group Focus isn’t visible to make it visible. This mostly works. But a few drawbacks. The icon doesn’t always go to the right height on page load, but then jumps there a second later. Additionally, when moving the page up or down, the group focus has a bit of lag (miliseconds not seconds) which looks a bit off.

Probably good enough for a first version, but will want to revisit at some point to improve the UX.

@sridharan.s Hey, have you figured out a more elegant solution since?

Facing an issue where the Group Focus sits at an incorrect position until the page is scrolled.

No, we ended up changing the interface so never needed a better solution. I suspect their’s either a plugin that enables this now or I’d recommend finding someone to write a few lines of javascript to make it work.

1 Like

Okay I figured out a way:

Put the text box in a repeating group and select ‘Full List’ as its Layout Style.

This also works great to implement a “Show more” or “Read more” feature, where you want the text box to expand/collapse and all the elements below re-adjust automatically