Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[List / Popover] List Display issues within Popover when filter-enabled #7545

Closed
2 of 3 tasks
macandcheese opened this issue Aug 17, 2023 · 7 comments
Closed
2 of 3 tasks

[List / Popover] List Display issues within Popover when filter-enabled #7545

macandcheese opened this issue Aug 17, 2023 · 7 comments
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. has workaround Issues have a workaround available in the meantime. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - low Issue is non core or affecting less that 10% of people using the library

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Aug 17, 2023 •
edited
Loading

Check existing issues

Actual Behavior

When using List within Popover and filter-enabled is true - some undesired visuals in a few situations:

In all browsers, when the popover is overlay-positioning: absolute, undesired placement of the filter bar. Notice some differences across browers:
positioning absolute all browsers

In Safari, when the popover is overlay-positioning: fixed, undesired placement of the filter bar. Notice that is displays correctly in Chrome, but incorrect in different ways in Desktop vs. Mobile Safari.
positioning fixed safari issues

Expected Behavior

Correctly positioned filter bar regardless of browser, or parent Popover overlay-positioning value.

Reproduction Sample

See below

Reproduction Steps

For issues with overlay-positioning="absolute":
https://codepen.io/mac_and_cheese/pen/NWeWqQo?editors=1000

For issues with overlay-positioning="fixed" and Safari:
https://codepen.io/mac_and_cheese/pen/qBLWKXZ?editors=1000

Open above in various browsers to see behavior.

Reproduction Version

1.6.0

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react

Esri team

Calcite (design)
@macandcheese macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Aug 17, 2023
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Aug 17, 2023
@macandcheese macandcheese added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone and removed impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Aug 17, 2023
@github-actions github-actions bot added the impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive label Aug 17, 2023
@driskull
Copy link
Member

its because the filter is positioned sticky. Might be related to #5743 (comment)

@driskull
Copy link
Member

@macandcheese if you add a overflow:auto to your content inside the popover then it seems to be fixed. We don't automatically overflow popover content. We could if we decided what heights those would be but currently its left up to the user.

@driskull
Copy link
Member

https://codepen.io/driskull/pen/xxmxVwv?editors=1000

@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library has workaround Issues have a workaround available in the meantime. research Issues that require more in-depth research or multiple team members to resolve or make decision. 1 - assigned Issues that are assigned to a sprint and a team member. labels Aug 21, 2023
@geospatialem geospatialem removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Aug 21, 2023
@geospatialem
Copy link
Member

Research will be conducted to determine if the Safari issue is a browser bug, or if additional efforts could be tackled.

@geospatialem geospatialem removed the impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone label Aug 21, 2023
@driskull
Copy link
Member

@macandcheese I'm not seeing the safari issue when I use the overflow fix I provided.

@driskull driskull assigned geospatialem and unassigned driskull Aug 23, 2023
@brittneytewks brittneytewks added spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. and removed research Issues that require more in-depth research or multiple team members to resolve or make decision. labels Aug 29, 2023
@geospatialem geospatialem removed their assignment Aug 30, 2023
@geospatialem
Copy link
Member

Assigning to @macandcheese per #7545 (comment). ☝🏻

@macandcheese
Copy link
Contributor Author

Closing as seems like this is expected / has workaround for now.

@macandcheese macandcheese removed their assignment Sep 4, 2023
@macandcheese macandcheese removed 1 - assigned Issues that are assigned to a sprint and a team member. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Sep 4, 2023
@macandcheese macandcheese mentioned this issue Mar 12, 2024
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (design) Issues logged by Calcite designers. has workaround Issues have a workaround available in the meantime. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@driskull @macandcheese @geospatialem @brittneytewks