I have a sidebar filter with a searchable drop down made up of:
- Search input
- Input Monitor
- Group Focus attached to the search input.
The default with is fixed to start with:
When switching to mobile, the filter sidebar will abandon its fixed witdh and get a 100% width instead.
The problem is I cannot make the Group Focus match the width of its parent input search.
All I can achieve is:
- Fixed width
- 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?
Use CSS to set the GroupFocus’s width dynamically to the width of the reference element.
OK I had hoped for a more bubbly solution. Any possible reference to an existing CSS snippet I could work from?
Something like this should do it:
max-width: myElement's width px !important;
where myElement’s width is a dynamic value of the reference element’s width.
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.
Layout on mobile:
1 . Filter side bar (100%)
2. Filter group item (no max width)
3. Filter input field (no max width)
- 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.
how did I miss that?
Glad it worked!
I personally try to avoid using fixed width and just thought everyone does the same
I prefer it for smaller elements like icons.