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.
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.
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.
var element = document.getElementById('reference'); var reference = element.getBoundingClientRect(); bubble_fn_left(reference.left + YourDynamicOffset);<style> #groupfocus { left: JavascripttoBubble A's valuepx!important; }</style>
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!
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.
@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
thank you @boston85719
I tried that but it didn’t work. Just to add some details:
what do you think?
@boston85719 will you be able to share the screenshots of your Javascript and HTML code
I’ve tried a few different things. but nothing is working
How do you attach the value to the group focus itself?
