Scrollbar Design
There are 3 different options to indicate possible scrolling:
- Default: In the default mode, scroll indicators are drawn in the middle of the menubar.
- ScrollBar: You can activate the scrollbar mode, in which the scrollbar will be shown on the right side of the screen.
- None: You can also deactivate the indication of possible scrolling completely.
Design
Default Scroll Indicators
By default scroll arrows are painted in the menubar to indicate possible scrolling. You can specify the color or the images used for the indicators:

The example above is realized with two images and following CSS code:
.mailForm {
padding: 5;
padding-left: 5;
padding-right: 5;
background {
type: horizontal-stripes;
top: title;
bottom: menubar;
first-top-color: screenColorTop1;
first-bottom-color: screenColorBottom1;
second-top-color: screenColorTop2;
second-bottom-color: screenColorBottom2;
}
layout: horizontal-expand | horizontal-center | top;
//#if !polish.useScrollBar
scrollindicator-up-image: url( arrowUp.png );
scrollindicator-down-image: url( arrowDown.png );
//#endif
}
Specific design attributes:
| CSS Attribute | Default | Values | Applies To | Explanation |
|---|---|---|---|---|
| scrollindicator-color | black | colorscreen styles |
The color of the scrolling indicators.
.myForm {
scrollindicator-color: #a00;
}
|
|
| scrollindicator-up-image | - | image-URL | screen styles | The image indicating that the user can scroll upwards. |
| scrollindicator-down-image | - | image-URL | screen styles | The image indicating that the user can scroll downwards. |
ScrollBar
You can activate the ScrollBar by setting the variable "polish.useScrollBar" to "true" in your build.xml script. The scrollbar is then drawn at the right side of the screen and can operate in different modes:
- page: In the "page" mode the position and height of the currently visible area is shown relative to the complete height of that screen.
- area: In the "area" mode the slider represents the position of the current selection relativ to the complete width and height.
- item: In the "item" mode the index of currently selected item is taken into account relative to the number of items.
This example shows the ScrollBar in the default "page" scrollmode: 
You can design the scrollbar by using the scrollbar CSS selector:
scrollbar {
scrollbar-slider-color: #333;
scrollbar-slider-width: 3;
/* You can also define background, border, padding, etc */
}
You can also automatically hide the scrollbar so that it does not occopy screen space. The scrollbar will then be
made visible each time the user scrolls on the screen:
scrollbar {
scrollbar-slider-color: #2d2;
scrollbar-slider-width: 6;
scrollbar-fadeout: true;
opacity: 180;
background-color: white;
}
Specific design attributes:
| CSS Attribute | Default | Values | Explanation |
|---|---|---|---|
| scrollbar-fadeout | false | true, false | Defines if the scrollbar should automatically fade out. Additionally you have to define the opacity attribute. |
| scrollbar-slider-color | black | color | The color of the slider, is ignored when a slider-image is defined. |
| scrollbar-slider-down-image | - | imageurl | The image used for signaling that the user can scroll downwards. By default nothing is painted. |
| scrollbar-slider-image | - | imageurl | The URL of image used for the slider. |
| scrollbar-slider-image-repeat | false | true, false | Either "true" or "false". When "true" is given, the slider image is repeated vertically, if necessary. |
| scrollbar-slider-mode | page | area, item, page | The mode of the slider, either "area", "item" or "page". In the "area" mode the slider represents the position of the current selection relative to the complete width and height. In the "item" mode the index of the currently selected item is taken into account relative to the number of items. In the "page" mode the height of the currently visible area will be set relative to the complete height of the screen. The default mode is "page". |
| scrollbar-slider-up-image | - | imageurl | The image used for signaling that the user can scroll upwards. By default nothing is painted. |
| scrollbar-slider-width | 2 | integer | The width of the slider in pixels, is ignored when a slider-image is defined. |
| scrollbar-style | scrollbar | style | The name of the style for the scrollbar of the corresponding Screen. |
| Further CSS Attribute | Default | Values | Explanation |
| after | - | imageurl | The URL of the image that should be shown after the item in question. |
| always-include | false | true, false | Defines if a style should always be included, even if not used. |
| background | - | background definition | The background of an item or screen. The default background for items is "none", the default background for screens is a simple white background. |
| before | - | imageurl | The URL of the image that should be shown before the item in question. |
| complete-border | - | border | A border reference from the borders section. The border includes the label of the item and is independent of the item's normal border. |
| complete-background | - | background | A background name from the backgrounds section. The background includes the label of the item and is independent of the item's normal background. |
| border | - | border definition | The border of an item or screen. The default border is "none". |
| complete-background-padding | - | integer | The padding that is added to the complete-background and/or complete-border. Note that this does not change the size of the item, so you might need to adapt margins or normal paddings for your design. |
| focused-style | focused | style | The name of the style for the currently focused item, usually applied with a [style-name]:hover construct. |
| inherit | true | true, false | Defines if a style that extends this style should inherit all attributes. |
| label-style | label | style | The name of the style for the label of the corresponding Item. |
| max-height | - | integer | The maximum height of an item. |
| max-width | - | integer | The maximum width of an item. |
| min-height | - | integer | The minimum height of an item. |
| min-width | - | integer | The minimum width of an item. |
| table-selected-background | - | background | The background for selected cells of a table. |
| colspan | 1 | integer | The number of columns wich are used by the item within a table. |
| table-selected-row-background | - | background | The background for selected rows of a table. |
| include-label | false | true, false | Usually the label of an item is rendered separately of the item's content. You can expand the background and border over the label as well using this attribute. |
| opacity | 255 | integer | The opacity of an item between 0 (fully transparent) and 255 (fully opaque). |
| pressed-style | - | style | The style which indicates that an item is being pressed, usually applied with a [style-name]:pressed construct. |
| table-selected-column-background | - | background | The background for selected columns of a table. |
| view-type | - | fade-in, fade-out, particle, size-decrease, size-increase | Defines another visualization for an Item or a Screen. |
| visible | true | true, false | Toggles the visibility of an item. When an item is invisible, it will not occupy any space. |
| x-adjust | 0 | integer | The horizontal position adjustment. |
Deactivate Scroll Indicators
You can deactivates scroll indicators completely by setting the variable "polish.deactivateScrollIndicator" to "true" in your build.xml script.
When using the scrollbar, you can also hide the scrollbar for specific screens by using the
show-scrollbar CSS attribute within the corresponding screen's style:
.screenMain {
show-scrollbar: false;
}
Configuration
-
To activate the scrollbar:
<variable name="polish.useScrollBar" value="true" />
-
To deactivate all scrollindicators:
<variable name="polish.deactivateScrollIndicator" value="true" />
