Align Icon to Right of Text

I have a repeating group and I want to align both an ‘Edit’ and ‘Delete’ icon next to each item in the group. In the below example, the ‘Edit’ icon is added as part of the text element by adding “[fa] fa fa-edit [/fa]” in the text. Now I want to add a ‘Delete’ icon next to the ‘Edit’ icon. Because I want these icons to be individually clickable, they need to be separate objects (I can’t just add “[fa] fa fa-delete[/fa]” to the text because then it can’t be clicked on). How can I get the ‘Delete’ icon to snap to the right of the ‘Edit’ icon?

If you place the trash icon in the place you want and, thru the Responsive tab, align it to the left, it shoul work.

That didn’t work. (Although it does seem like it’s working in the Responsive tab) I think it may have something to do with the fact that they’re in a repeating group… Like it’s just placing the icon to the right of the longest text item. UPDATE: using chrome developer tool revealed that all the text containers are the same length, regardless of how many characters they contain… so I think this is the root cause. Text boxes are not fixed width and “shrink if text gets shorter” is enabled

I think you will need custom CSS for this. Or, some plugin.

Take a look in Smaal Tags, specifcly in the “Verified User Tag”. It may help!

image

https://smaal.bubbleapps.io/tags

Place the elements inside a group. That should do the trick.

what @cmarchan said :slight_smile:

This topic was automatically closed after 70 days. New replies are no longer allowed.