There were actually two problems: on Firefox in prod mode the collapse button was outside of the filter panel, and on Chrome the filter panel would change its width when user typed something in and
there was no match.
The second problem was caused by the calendar overflowing and squeezing the filter panel to less than its fixed width of 300px. This is fixed by setting width: min-content on calendar content -
that tells the table to expand as little as it needs, then setting flex-grow: 1 on the content to tell it to take up the remaining space (otherwise it was as small as it needed so very narrow), and
setting flex-grow: 1 on the container for the same reason.
The first problem was caused by the fact that input elements have different widths in different browsers (the num of pixels is calulated differently). And the default input in firefox is just too
wide. This is solved by setting size="10"
on the input element, which setins it min width to be smaller that the default. flex-grow: 1 on its parent - .search makes sure it takes up as much space as possible, soo this doesn't break
other browsers. The minimum value of size="10" is small enought for all Chrome, Safari and Firefox. (size is a number of characters the field is supposed to display and based on that the width of
the input is calculated, but it is calculated differently by different browsers)
Details
Details
- Reviewers
michal - Commits
- rCOMM601931b07463: [web] Fix search area in filter panel
Run web app in dev and prod mode on Chrome, Firefox and Safari, and checked that the search area displays correctly both when there is nothing typed in and when the user is tying something.
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Branch
- inka/fix_filter_search_area
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
Comment Actions
Simplify. Turns out the second problem can be fixed with even less code (thank you @michal)