Skip to content

Fix scroll bar position#392

Merged
emilk merged 4 commits intoemilk:masterfrom
parasyte:fix/scrollbar-position
Jun 3, 2021
Merged

Fix scroll bar position#392
emilk merged 4 commits intoemilk:masterfrom
parasyte:fix/scrollbar-position

Conversation

@parasyte
Copy link
Contributor

While experimenting with #391, I noticed a bug in the way the vertical scroll bar is positioned. The screens below show the demo app resized to various widths.

A wide window looks nice, the scroll bar is firmly attached to the right side of the window:

vertical-scroll-bar-1

At some point, when the window is made thinner, the scroll bar begins to disappear behind the window border:

vertical-scroll-bar-2

When the window is very thin, you can see contents getting clipped as if the scroll bar should appear in the blank space:

vertical-scroll-bar-3


With this very simple patch, the scroll bar correctly sits in that blank space:

vertical-scroll-bar-4

And bonus, wide windows still allow the scroll bar to stick to the right edge (see first screen).

@parasyte
Copy link
Contributor Author

parasyte commented Jun 3, 2021

The original patch positioned the scroll bar incorrectly when the content was smaller than the ScrollArea width. Now it doesn't attempt to use anything other than exactly the ScrollArea width.

@parasyte
Copy link
Contributor Author

parasyte commented Jun 3, 2021

I just discovered another bug in the ScrollArea with content clipping. This one is easiest to see with "paint clip rectangles (debug)" enabled.

Wall of text, lots of screen shots...

First, this is what it looks like with a window-with-scroll-bar that is about the same width as its parent:

scrollarea-clipping-rect-1

There is something else interesting to note: The width of the clipping rect on the side bar takes up all available width (except for space for a scroll bar)! This will be important later...

If I start resizing the settings window horizontally to the right, it will eventually become wider than the parent. The scroll bar will go out of view, but the clipping rect is pinned to the parent width:

scrollarea-clipping-rect-2

This improperly clips the contents and leaves a gap that is the same size as the scroll bar that is now going under the fold.

If I keep stretching the window width, you can see the clipping issue quite clearly:

scrollarea-clipping-rect-3

Now with the patch in c080ca9, we can see how different it is when the window gets just too wide for the parent:

scrollarea-clipping-rect-4

The right side of the collapsible headers no longer gets clipped. You can make out the rounded corners.

Also! Notice that now the clipping rect for the sidebar is the expected size.

And if we keep stretching the window width, everything is fine:

scrollarea-clipping-rect-5

I did a little digging and it looks like the original clipping logic was introduced in 24ce7b4, and then fixed for the Resize container in 347fdb9 (but sadly not fixed for ScrollArea).

Copy link
Owner

@emilk emilk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the digging into this!

Seems the code not only became more correct, but also shorter! Awesome :)

@emilk emilk merged commit 2932ff0 into emilk:master Jun 3, 2021
@parasyte parasyte deleted the fix/scrollbar-position branch June 3, 2021 17:37
@emilk
Copy link
Owner

emilk commented Jun 3, 2021

Oh no, this broke resizing of windows: windows can now be shrunk so narrow that they don't fit their contents. This is not good:

Screen Shot 2021-06-04 at 00 02 02

I'll revert

emilk added a commit that referenced this pull request Jun 3, 2021
emilk added a commit that referenced this pull request Jun 3, 2021
emilk added a commit that referenced this pull request Jun 9, 2021
This is an alternative attempt to fix the bug mentioned in
#392

egui expects that the container can always be made wider,
which is true for all egui Ui:s, but not true for the outer
frame/chrome that egui ultimately needs to sit within.
emilk added a commit that referenced this pull request Jun 9, 2021
This is an alternative attempt to fix the bug mentioned in
#392

egui expects that the container can always be made wider,
which is true for all egui Ui:s, but not true for the outer
frame/chrome that egui ultimately needs to sit within.
emilk added a commit that referenced this pull request Jun 12, 2021
* Make sure the scroll bar is never outside the screen rectangle

This is an alternative attempt to fix the bug mentioned in
#392

egui expects that the container can always be made wider,
which is true for all egui Ui:s, but not true for the outer
frame/chrome that egui ultimately needs to sit within.

* Clamp scroll to screen rect rather than available rect

* Fix scrollbar spacing when shrinking too small

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants