Group Focus goes off screen?

On mobile my group focus within my repeating groups will go off screen for certain elements. Is there anyway to keep a group focus always on screen?
Offsetting it based on screen width doesn’t really work here I don’t think as the RG goes from left to right and so one side need a certain offset different to the other.

Any ideas?




Have you figure out this?

Would really want to know how to deal with this same issue!

@hsieh.poyen

Give your parent an HTML id and pass this code into HTML element.

#mainContent {
  overflow:hidden;
}

and see if it working or not.

Let me know someone if this works, whereas now i use workflow “if this condition is true” and setting up when (in my case) a popup is visible, to hide the FocusGroup.

Try adding this to either your app (Settings > Script in the Body) or the page (click the page in Elements Tree > Page HTML Header)

<style>
@media all and (max-width: 767px) {
 .GroupFocus {
    width: 95% !important; /*Or whatever % you want*/
    max-width: unset !important;
    left: 2.5% !important; /*This is just 100% minus width (above) divided by 2 to make it centered*/
    }
}
</style>

So instead of this on mobile:
Screen Shot 2022-06-06 at 2.20.27 PM

It should be centered like this:
Screen Shot 2022-06-06 at 2.19.41 PM

If you just want it for a specific Group Focus, give the element an ID, and use #theElementIdYouUsed instead of .GroupFocus in the CSS above.

Hopefully that’s helpful!

6 Likes

Thank you so much! Super helpful - and it worked!

1 Like

You’re welcome!