Basically, there is unwanted and non-removable extra padding around a ScrollBox that can’t be removed and which makes the size of the box and its content not match the entered sizes in the ScrollBox’s properties.
I’ll explain by means of an example.
- I created a ScrollBox with a size of 197*x96, and with a vertical scrollbar size of 5 (e.g. 192 + 5)
- I put a GridPanel inside it.
- Inside the GridPanel, I placed two 96x96 images, side by side.
And I noticed the following incorrect behaviours:
- The bottom pixel of each image is cut, and instead there is a single row of empty pixels at the bottom of the ScrollBox.
- The ScrollBox has a scroll bar visible, which can be used to scroll down to the missing pixel, even though there should be no scrollbar because the content is exactly the same size as the ScrollBox
- Some portion of the right of the second image is cut off by the scroll bar, because it is (significantly) larger than the 5 pixels specified. Entering larger values also results in the actual size of the scrollbar (plus the space taken up by the padding around the scrollbar) being much larger than the value specified.
I tried playing with various styling options, setting every size and margin to 0, but that did not fix the problem.
The following image shows the problem in the above-described setup.
Note that the image is 96x96, and has a single-pixel red border at its edges, and a single-pixel blue border inside that. You can see that the red border is cut from the bottom, and both the red and blue borders are cut from the right side of the second image.
