Forum Academy Marketplace Showcase Pricing Features

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.

Hi @boston85719,

You can’t target a groupfocus element’s offset value.

The groupfocus has a position: fixed and uses the left property to be positioned in the page.

You can use that property to position the group relatively to other elements using the elements widths to calculate that value.

For example, to position a groupfocus in the middle of the screen, its left property should be Current page width - Groupfocus width / 2.

I hope it helps.


Follow me on twitter

https://twitter.com/juanmtzalmeida

Hi @jmalmeida

Thanks for the reply.

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.

Any ideas on how to achieve that?

Hi @boston85719,

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.


Follow me on twitter

https://twitter.com/juanmtzalmeida

Hi @jmalmeida

Appreciate the idea.

Any code snippets you could share to set me off on this? Would be much appreciated.

Cheers

Matt

You’ll need the Toolbox plugin.

  1. Add ids to the reference element (reference) and to the groupfocus (groupfocus).
  2. Add JavascripToBubble element and enter ‘left’ as suffix, type ‘number’
  3. 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);
  4. In the code, replace YourDynamicOffset with the dynamic offset you want
  5. Add an HTML element with the code: <style> #groupfocus { left: JavascripttoBubble A's valuepx!important; }</style>
  6. Edit: Obviously the ‘JavascriptoBubble A’s value’ has to be a dynamic expression!

Follow me on twitter

https://twitter.com/juanmtzalmeida

3 Likes

Awesome, thanks for this. I’m going to give it a try.

Let me know if you find any roadblocks

Thanks for the help @jmalmeida

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.

Of course it tracks the reference element!

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!

image

I’m referring to when the groupfocus is already open and the user changes the size of the viewport.

But in that case the groupfocus disappears, doesn’t it?

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.

Putting this into a project right now.

Chrome in Mac closes the tooltip when you resize the window.

Although I don’t think it’s an issue if the tooltip doesn’t close, the user resizing the window it’s a rare case and it doesn’t matter.

1 Like