Need Help with Group Focus Placement in Table Editing

[Xtine]

Hi,

I’ve created a table that includes a column for editing. When you click the “edit” button, I’ve linked a group focus element to appear exactly where you are in the table, rather than as a centered popup on the screen.

However, when editing the bottom rows of the table, I would like the group focus to appear above the selected row instead of below, as it does now. Does anyone have any tips on how I can make this look neat and user-friendly?

[boston85719]

Custom CSS Groupfocus Offset

Does anybody have a working custom CSS solution to change the groupfocus elements offset settings? I really want to make a feature that a groupfocus element can have its offset value changed dynamically based on the values coming from the repeating group that is placed inside of it. It is easy enough to create a condition that will provide the value required of the offset on the groupfocus, I just don’t know of the custom CSS to target a groupfocus element’s offset value.

[Xtine]

Thank you. This looks difficult. Do you have a step-by-step guide or a demo somewhere?

[boston85719]

@Xtine

Do you have a step-by-step guide

Custom CSS Groupfocus Offset

You’ll need the Toolbox plugin. Add ids to the reference element (reference) and to the groupfocus (groupfocus). Add JavascripToBubble element and enter ‘left’ as suffix, type ‘number’ In the workflow where you show the groupfocus, add first a Run Javascript action (it has to run before you show the groupfocus) with the following code: var element = document.getElementById('reference'); var reference = element.getBoundingClientRect(); bubble_fn_left(reference.left + YourDynamicOffset); In the …