| 20 | | All of these elements can be styled through RCSS to be sized, positioned and rendered appropriately. The recommended method for configuring a scrollbar is given below (note that this is for a vertical scrollbar; for a horizontal, swap width and height): |
|---|
| 21 | | |
|---|
| 22 | | 1. Set the 'width' property of the ''scrollbarvertical'' element to the appropriate value for your interface design. This needs to be enough to encompass |
|---|
| 23 | | 1. Set the 'width' and 'height' properties of the ''sliderarrowdec'' and ''sliderarrowinc'' elements as appropriate. Set them to '0' if you don't want buttons. |
|---|
| 24 | | 1. Set the 'width' property of the ''slidertrack'' as appropriate. The 'height' value will be ignored for the track and will always be set internally. Use 'margin-left' to position the track within the scrollbar. |
|---|
| 25 | | 1. Set the 'width' property of the ''sliderbar'' as appropriate. The height of the bar will be generated internally, but you can override this with the 'height' property, or use the 'min-height' and 'max-height' properties to influence it. |
|---|
| 26 | | 1. Apply decorators to the elements as appropriate. |
|---|
| 27 | | |
|---|
| 28 | | See the Rocket Invaders from Mars demo style sheet and the [wiki:documentation/tutorials/WindowTemplate#Step4:Addingascrollbar templating tutorial] for more pointers. |
|---|
| 29 | | |
|---|
| 30 | | === The 'scrollbar-margin' property === |
|---|
| 31 | | |
|---|
| 32 | | As described above, the scrollbar elements (''scrollbarvertical'' and ''scrollbarhorizontal'') will shorten themselves automatically to avoid a corner intersection. This can lead to scenarios where a scrollbar is popping on and off (during a window resize, for example) and causing the other scrollbar to rapidly change size. To avoid this, and force a scrollbar to always shorten itself for a corner, you can use the numerical 'scrollbar-margin' property on a scrollbar element. An element will shorten itself (on the bottom or right side, as appropriate) by the minimum of the appropriate corner dimension and the scrollbar margin. |
|---|
| | 20 | See the [wiki:documentation/StyleGuide style guide] for documentation on applying properties to a scroll bar. |
|---|
