Forum Documentation Showcase Pricing Learn more

Group Focus: responsive position?

Hey!

Shouldn’t the Group Focus’ position be responsive?

I would expect it to always stay visible within the screen as it gets resized, instead of strictly respecting its offset values.

On desktop view:


On mobile view:

What I would expect:

(Properties just for context : )
Focus03

It’s relative to the ref element. Looks as though your problem will be solved if your button was correctly aligned atm it’s in no-mans land. I would also try and keep the max width below 280px.

Hi @morewebs

Thanks for your answer :slight_smile:

In the actual app, there are several buttons next to each other, all left-aligned.

Although the GroupFocus on the first one might appear well, it will still be an issue on buttons 3 / 4 / etc.
So I don’t think the issue is about the button’s position on the page.

Here’s an updated example with the buttons correctly aligned:

Desktop view:


Mobile view:

Obviously, I agree that if the content of you Group Focus is too large and fixed width, it won’t show properly on smaller screens, as for any other element type.
FYI: on the screenshots right above, the GroupFocus is 270px (while the mobile view is 360px).


To me, the GroupFocus should be positionned relative to it’s Reference Element but it’s offest values should adapt if it doesn’t fit the screen anymore.

Right now, I can’t think of a use case where you would prefer to have your GroupFocus to be partially hidden rather than to have its position move regarding it’s reference element.
Rational: if you can see the ReferenceElement on your page (responsive-wise), then you can click on it, then you expect to be able to see it’s GroupFocus.

I agree with what you are saying but as a general rule of thumb, I would always stack my buttons on mobile view anyway and slim your canvas down to a min of 320 not 360px. Maybe even nest all the other 3 button actions inside the one button when slimmed down to mobile view. My mantra on mobile is always keep things down to a min. What are the other buttons for?

100% agreed regarding mobile design :ok_hand:
I do the same (320px, group elements in an extra Menu, etc.).

But at the moment I’m not looking for workarounds.

What I’m trying to understand is if the behaviour described in the images is the expected behaviour (since to me it shouldn’t be).
Hence my post in “Bugs”.

I’ll let the :loudspeaker: Support shime in to tell us if it is in fact the expected behaviour or if something is off.


Other example: menus in Repeating Groups:


You’ll be forced to offset the GroupFocus to the left:

What about if you set a condition for the last item in a row to offset the group focus by X.x.x… could be a workaround but a lot of hassle for such a simple and* logical approach.