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

Unable to scroll constrained block content #5686

Closed
nwhittaker opened this issue Nov 4, 2022 · 4 comments
Closed

Unable to scroll constrained block content #5686

nwhittaker opened this issue Nov 4, 2022 · 4 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 2 Small fix or update, may require updates to tests. has workaround Issues have a workaround available in the meantime. p - low Issue is non core or affecting less that 10% of people using the library
Milestone
2023 July Priorities

Comments

@nwhittaker
Copy link
Contributor

nwhittaker commented Nov 4, 2022 •
edited
Loading

Actual Behavior

If the height of a block's content exceeds the height of the block, it's not possible to constrain the content to 100% of the block and scroll the overflow.

Expected Behavior

If the height of a block's content exceeds the height of the block, it is possible to constrain the content to 100% of the block and scroll the overflow.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/BaxOQga

Reproduction Steps

  1. Visit the code sample
  2. Try to scroll the first block and see it shows the current behavior where the user is unable to scroll the contents of the block.
  3. Try to scroll the second block and see it is patched to show the expected behavior of being able to scroll the contents of the block.

Reproduction Version

beta.97

Relevant Info

Related to #5422.

Regression?

No response

Impact

Field Maps has a modal layout where a block is used to expand/collapse a preview area. The preview area has a somewhat fixed height (relative to the height of the viewport) but a variable amount of content, so it needs to be scrollable.

The current workaround is to use a custom layout and lose the expand/collapse behavior.

Esri team

ArcGIS Field Apps
@nwhittaker nwhittaker 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 4, 2022
@github-actions github-actions bot added the ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. label Nov 4, 2022
@jcfranco
Copy link
Member

I believe this is doable w/o any further changes to block. Can you give this a try? https://codepen.io/jcfranco/pen/GRGrVeN

@jcfranco jcfranco added the has workaround Issues have a workaround available in the meantime. label Nov 10, 2022
@nwhittaker
Copy link
Contributor Author

Thank @jcfranco, that looks like a doable workaround, but I'm wondering if you think a simpler approach is feasible.

The underlying issue stems from how flex box items have an implicit min-height equal to the height of their content. Looking at the calcite-block shadow DOM, giving the section.content element a min-height: 0 style is sufficient to get scrolling working correctly w/out needing the extra mark-up and styling: https://codepen.io/nwhittaker-esri/pen/RwJpVLg

Not sure if this change introduces other layout issues, but it feels like it lends itself better to more intuitive mark-up and styling.

@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library estimate - 2 Small fix or update, may require updates to tests. labels Feb 27, 2023
@geospatialem geospatialem added this to the 2023 May Priorities milestone Feb 27, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Feb 27, 2023
@jcfranco jcfranco self-assigned this Jul 24, 2023
@jcfranco jcfranco added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jul 24, 2023
@jcfranco jcfranco mentioned this issue Jul 24, 2023
Merged
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Jul 25, 2023
jcfranco added a commit that referenced this issue Aug 3, 2023
@jcfranco
feat(block): improve block's content layout to allow scrolling (#7367)
ecbf17b 
**Related Issue:** #5686 

## Summary

This applies @nwhittaker's
[suggestion](#5686 (comment))
(belated thanks! 🎉) to make scrolling setup easier within blocks.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Aug 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Aug 3, 2023

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Aug 3, 2023
@geospatialem
Copy link
Member

Verified in 1.5.0-next.36 with https://codepen.io/nwhittaker-esri/pen/BaxOQga

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 2 Small fix or update, may require updates to tests. has workaround Issues have a workaround available in the meantime. p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
2023 July Priorities
Development

No branches or pull requests
5 participants
@jcfranco @nwhittaker @alisonailea @geospatialem @benelan