How to Group Focus responsive width?

Need help Responsiveness
1

Hello,

I have a sidebar filter with a searchable drop down made up of:

  1. Search input
  2. Input Monitor
  3. Group Focus attached to the search input.

The default with is fixed to start with:

image
image348Ă—590 15.9 KB

When switching to mobile, the filter sidebar will abandon its fixed witdh and get a 100% width instead.

image
image398Ă—662 20.8 KB

The problem is I cannot make the Group Focus match the width of its parent input search.

All I can achieve is:

  1. Fixed width
  2. 100% width, which is going to send the right end of the group focus to the edge of the screen (our outside of it I can’t tell).

Neither are acceptable solutions.

I toyed with the focus group and the groups inside it too. I am not able to find a solution.

Is there a trick to it?

2

Use CSS to set the GroupFocus’s width dynamically to the width of the reference element.

1 Like
3

OK I had hoped for a more bubbly solution. Any possible reference to an existing CSS snippet I could work from?

4

Something like this should do it:

<style>
#group_focus {
  max-width: myElement's width px !important;
}
</style>

where myElement’s width is a dynamic value of the reference element’s width.

5

Do the 3 groups you mentioned have like…a parent group holding all 3 together?

If there’s a parent group holding them then setting that group focus to 100% width should make it stay within its parent container and not stretch out of it.

6

Layout on mobile:
1 . Filter side bar (100%)
2. Filter group item (no max width)
3. Filter input field (no max width)

  1. Focus group (either fixed width or 100% width)

I was about to tell you how it won’t work. Then I changed 4 to not-fixed width + no max width and then it worked like a charm.

:thinking: how did I miss that?

1 Like
7

Glad it worked!

I personally try to avoid using fixed width and just thought everyone does the same :sweat_smile:
I prefer it for smaller elements like icons.