Fix Scrolling in Minecraft HOC Tutorial View #10235
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes https://github.com/microsoft/pxt-minecraft/issues/2579
Height Calculation
We were trying to compute the tutorial pane's height directly to the scroll height of the content plus a hard-coded buffer, and I think the fixed buffer eventually got out of date when the styles changed.
Rather than simply updated the buffer size to a different fixed value, I set the height to
auto
which just dynamically resizes to fit content (Googling tells me it's well supported across different browsers, so I think it's safe).There was also an issue where the clientHeight / scrollHeight comparison was slightly off when determining if there was overflow because the clientHeight value contains padding, which eats into the actual "user visible" area for the child content. I've added a function to calculate the height without the padding to account for this
Show More/Less
While testing, I noticed the "Show More"/"Less" toggle appeared and disappeared somewhat randomly (even without my changes). The check we were doing for this was always based on the current size of the element, so I believe the decision on whether to show it was being affected by whether the element was actually expanded (i.e. "Show More") or not. This led to inconsistent-feeling behavior.
I reworked this so it's now based on the initial size as a "default" and not just the latest current size. I also moved it to the left when the toolbox is hidden, since it was just empty space before and I think it's better than overlapping the undo/redo buttons.
See It, Try It
Upload Target
Screenshots