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.
Trying to play around with this and seems that it will allow me to change the position of the groupfocus relative to the page but not the element it has set as the reference element.
My goal is to actually be able to have the custom css change it’s position relative to the reference element, the same way the offset values do.
It’s easy, just use javascript to get the left property of the reference element and set the left property of the groupfocus equal to that value + theOffsetYouWant via CSS.
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 code, replace YourDynamicOffset with the dynamic offset you want
Add an HTML element with the code: <style> #groupfocus { left: JavascripttoBubble A's valuepx!important; }</style>
Edit: Obviously the ‘JavascriptoBubble A’s value’ has to be a dynamic expression!
I’ve got it working for offsetting left and top of the reference element.
Only drawback is it doesn’t track the reference element in the event the user expands/contracts the page and the reference element position changes.
I suppose the way to resolve for that would be to add some kind of event listener for when the page size changes to run the javascript again, but that likely is not a great solution. Probably better to have the listener event just close the groupfocus and make it so user would just need to show it again after resizing the page.
Thanks again for the help. Definitely resolves the main problem I have is for when the groupfocus is being made visible in a repeating group and the last few cells of the repeating group hit the bottom of the page and need the groupfocus to offset relative to top of reference element rather than original setting which has it at the bottom.
If you are running the javascript in the same workflow and before you are showing the groupfocus, the reference left and top properties are updated every time!
I have not really tested this on a mobile device, where the likelihood is greater a user may do this since they can easily rotate their device.
However, on a desktop, if I change the browser tab width, the groupfocus does not automatically close since the click is not on the document, but the browser window, so on desktop when the page width decreases the groupfocus remains open.
I think ultimately, it is simple enough to make it so that each time the groupfocus is shown to run the javascript and not worry about those off chances the user changes viewport width while groupfocus is already open.
@jmalmeida thank you for the solution above. I tried your javascript + html solution above but my groupfocus isn’t properly aligned. I’ve attached pictures of the code and the screen. I’d appreciate it if you can please help me out
the problem is that the groupfocus menu is always in the same position (as shown in the last picture). I’ve tried different dynamic offset values
I think between the reference.left you need a closing ) and then you need to remove the two spaces between the + and the dynamic expression for current page width