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

Closed floating elements are taking up visual space when being dragged #8214

Closed
2 of 5 tasks
driskull opened this issue Nov 18, 2023 · 2 comments
Closed
2 of 5 tasks

Closed floating elements are taking up visual space when being dragged #8214

driskull opened this issue Nov 18, 2023 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Milestone
2023 December Pri...

Comments

@driskull
Copy link
Member

driskull commented Nov 18, 2023 •
edited
Loading

Check existing issues

Actual Behavior

Floating elements are taking up visual space because they are set to visibility:hidden.

Is there any way we can make them not introduce scrollbars in certain scenarios?

Expected Behavior

I would expect that any hidden menus are not taking up any visual space

Reproduction Sample

https://codepen.io/driskull/pen/Rwvxyaj

Reproduction Steps

  1. Open sample
  2. Notice the scrollbar appearing in the panel
  3. The scrollbar is because of the dropdown which is not opened.
  4. The banana icon opens a dropdown which is causing the issue

Reproduction Version

1.10

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

This is noticeable when a large menu is placed inside a list item and makes dragging experience pretty bad.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript
@driskull driskull 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 Nov 18, 2023
@github-actions github-actions bot added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone calcite-components Issues specific to the @esri/calcite-components package. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. labels Nov 18, 2023
@driskull driskull mentioned this issue Nov 20, 2023
Closed
4 tasks
@driskull driskull changed the title Floating elements are taking up visual space Closed floating elements are taking up visual space Nov 21, 2023
@driskull driskull changed the title Closed floating elements are taking up visual space Closed floating elements are taking up visual space when being dragged Nov 21, 2023
@driskull driskull mentioned this issue Nov 21, 2023
Merged
driskull added a commit that referenced this issue Nov 21, 2023
@driskull
fix: dragging floating ui components (#8230)
5a81f6c 
**Related Issue:** #8214 #7979

## Summary

- Update some component `open` handlers to call reposition before open
and after open
  - Previously, they were just calling when open was set to true.
- Update `floating-ui` utility
- Handle device pixel ratio:
https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
  - Only set `top`, `left`, and `transform` when the component is open.
- This makes it so that the positioned container is never going to "fly
in" from anywhere.
- Update sortable styles to hide any overflow on dragged elements.
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 0 - new New issues that need assignment. labels Nov 22, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

benelan pushed a commit that referenced this issue Nov 24, 2023
@driskull @benelan
fix: dragging floating ui components (#8230)
409c999 
**Related Issue:** #8214 #7979

## Summary

- Update some component `open` handlers to call reposition before open
and after open
  - Previously, they were just calling when open was set to true.
- Update `floating-ui` utility
- Handle device pixel ratio:
https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
  - Only set `top`, `left`, and `transform` when the component is open.
- This makes it so that the positioned container is never going to "fly
in" from anywhere.
- Update sortable styles to hide any overflow on dragged elements.
benelan pushed a commit that referenced this issue Nov 24, 2023
@driskull @benelan
fix: dragging floating ui components (#8230)
09f80b7 
**Related Issue:** #8214 #7979

## Summary

- Update some component `open` handlers to call reposition before open
and after open
  - Previously, they were just calling when open was set to true.
- Update `floating-ui` utility
- Handle device pixel ratio:
https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
  - Only set `top`, `left`, and `transform` when the component is open.
- This makes it so that the positioned container is never going to "fly
in" from anywhere.
- Update sortable styles to hide any overflow on dragged elements.
benelan pushed a commit that referenced this issue Nov 26, 2023
@driskull @benelan
fix: dragging floating ui components (#8230)
35b1d41 
**Related Issue:** #8214 #7979

## Summary

- Update some component `open` handlers to call reposition before open
and after open
  - Previously, they were just calling when open was set to true.
- Update `floating-ui` utility
- Handle device pixel ratio:
https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
  - Only set `top`, `left`, and `transform` when the component is open.
- This makes it so that the positioned container is never going to "fly
in" from anywhere.
- Update sortable styles to hide any overflow on dragged elements.
@geospatialem geospatialem added this to the 2023 December Priorities milestone Nov 28, 2023
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed needs triage Planning workflow - pending design/dev review. 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 28, 2023
@geospatialem
Copy link
Member

Verified in 1.12.0-next.6

@driskull driskull mentioned this issue Dec 12, 2023
Merged
driskull added a commit that referenced this issue Dec 13, 2023
@driskull
fix(floating-ui): improve floating element performance (#8409)
4d8cfb8 
**Related Issue:** #7979 #8214 #8386 #8419 #5697

## Summary

- reverts #8001
  - Keeps doc updates 
- reverts partially #8230
- Keeps drag classes that are setting `overflow:hidden` when a drag is
occurring.
- Keeps roundByDPR floating-ui fix.
https://floating-ui.com/docs/misc#subpixel-and-accelerated-positioning
- Hides overflow for `calcite-sortable--chosen` class
- Only sets `top` and `left` on floating element once positioned. **This
fixes native drag and drop issue**
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone
Projects
None yet
Milestone
2023 December Priorities
Development

No branches or pull requests
3 participants
@driskull @geospatialem @DitwanP