Scrollbar Design
There are 4 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.
- scroll-up/down-background: Additionally you can use the CSS attributes
scroll-down-backgroundandscroll-up-backgroundfor showing subtle scrolling hints.
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: 80%;
background-color: white;
}
Specific design attributes:
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| scrollbar-slider-background | - | background | The background that renders the slider instead of the default monocolored rectangular slider. | 2.1 |
| scrollbar-fadeout | false | true, false | Defines if the scrollbar should automatically fade out. Additionally you have to define the opacity attribute. | 2.0 |
| scrollbar-slider-color | black | color | The color of the slider, is ignored when a slider-image is defined. | 1.3 |
| scrollbar-slider-down-image | - | imageurl | The image used for signaling that the user can scroll downwards. By default nothing is painted. | 1.3 |
| scrollbar-slider-image | - | imageurl | The URL of image used for the slider. | 1.3 |
| scrollbar-slider-image-repeat | false | true, false | Either "true" or "false". When "true" is given, the slider image is repeated vertically, if necessary. | 1.3 |
| 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". | 1.3 |
| scrollbar-slider-up-image | - | imageurl | The image used for signaling that the user can scroll upwards. By default nothing is painted. | 1.3 |
| scrollbar-slider-width | 2 | integer | The width of the slider in pixels, is ignored when a slider-image is defined. | 1.3 |
| scrollbar-style | scrollbar | style | The name of the style for the scrollbar of the corresponding Screen. | 1.3 |
| Further CSS Attribute | Default | Values | Explanation | Since |
| after | - | imageurl | The URL of the image that should be shown after the item in question. | 1.3 |
| always-include | false | true, false | Defines if a style should always be included, even if not used. This is useful for programmatically accessed and for HTML browser styles. | 2.0 |
| 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. | 1.0 |
| background-anchor | left | top | left, horizontal-center, h-center, hcenter, center, right, top, vertical-center, v-center, vcenter, bottom | The orientation of the background in case either it's width or height is different from the item's dimensions. | 2.1 |
| background-height | 0px | dimension (px, %), e.g. 3.5% | The height of the background in pixel or percent, if it should differ from the the item's width. | 2.1 |
| background-width | 0px | dimension (px, %), e.g. 3.5% | The width of the background in pixel or percent, if it should differ from the the item's width. | 2.1 |
| before | - | imageurl | The URL of the image that should be shown before the item in question. | 1.3 |
| bgborder | - | border | The border of an item which is painted before the background. This needs to be a reference to a border defined in the borders section. | 2.1 |
| 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. | 2.0 |
| border | - | border definition | The border of an item or screen. The default border is "none". | 1.0 |
| colspan | 1 | integer | The number of columns wich are used by the item within a table. | 1.3 |
| 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. | 1.3 |
| 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. | 2.0 |
| content-visible | true | true, false | Activates or deactives the visibility of the item's contents. When the content is not visible, only the label as well as before and after attributes are visible. | 2.1 |
| content-x-adjust | 0px | dimension (px, %), e.g. 3.5% | The horizontal position adjustment of an item's content, use a negative value to move it to the left. | 2.1 |
| content-y-adjust | 0px | dimension (px, %), e.g. 3.5% | The vertical position adjustment of an item's content, use a negative value to move it to the top. | 1.3 |
| filter | - | Defines a filter for the specified UI element. | 2.1 | |
| focused-style | focused | style | The name of the style for the currently focused item, usually applied with a [style-name]:hover construct. | 1.0 |
| 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. | 1.3 |
| inherit | true | true, false | Defines if a style that extends this style should inherit all attributes. | 1.3 |
| inline-label | false | true, false | Inlines the label of an item, so that the content will be on the same row (or at least start on the same row). The label can only occupy 90% or less of the available width, otherwise this setting is ignored. | 2.1 |
| label-style | label | style | The name of the style for the label of the corresponding Item. | 1.0 |
| max-height | - | dimension (px, %), e.g. 3.5% | The maximum height of an item. | 1.3 |
| max-width | - | dimension (px, %), e.g. 3.5% | The maximum width of an item. | 1.3 |
| min-height | - | dimension (px, %), e.g. 3.5% | The minimum height of an item. | 1.3 |
| min-width | - | dimension (px, %), e.g. 3.5% | The minimum width of an item. | 1.3 |
| opacity | 100% | dimension (px, %), e.g. 3.5% | The opacity of an item between 0 (fully transparent) and 100% / 255 (fully opaque). | 1.3 |
| pressed-style | - | style | The style which indicates that an item is being pressed, usually applied with a [style-name]:pressed construct. | 2.0 |
| view-type | - | fade-in, fade-out, particle, size-decrease, size-increase | Defines another visualization for an Item or a Screen. | 1.3 |
| visible | true | true, false | Toggles the visibility of an item. When an item is invisible, it will not occupy any space. | 2.0 |
| x-adjust | 0px | dimension (px, %), e.g. 3.5% | The horizontal position adjustment of an item, use a negative value to move it to the left. | 2.1 |
| y-adjust | 0px | dimension (px, %), e.g. 3.5% | The vertical position adjustment of an item, use a negative value to move it to the top. | 2.1 |
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;
}
Use Backgrounds as Scroll Indicators
You can use the CSS attributes scroll-down-background and scroll-up-background for showing
subtle scrolling hints like in the following example:

backgrounds {
rssScrollUpBg {
type: partial-gradient;
top-color: #2f2f2f;
bottom-color: #ececec;
start: 0%;
end: 6%;
}
rssScrollDownBg {
type: partial-gradient;
top-color: #ececec;
bottom-color: #2f2f2f;
start: 94%;
end: 100%;
}
}
.rssBrowserForm {
padding-top: 3%;
padding: 0px;
background-color: #ececec;
background-top: title;
background-bottom: menubar;
scroll-up-background: rssScrollUpBg;
scroll-down-background: rssScrollDownBg;
screen-change-animation: right;
}
The scroll-up-background will be drawn over the screen's normal background when the user is able to scroll up, likewise the
scroll-down-background is drawn when the user can scroll down.
If you use the fullscreen mode and you do have backgrounds for the title and / or menubar you should specify that the screen's background is painted from below
the title down to the beginning of the menubar, instead from the very top to the very bottom of the screen. Realize this with
background-top: title; and background-bottom: menubar;.
For the scroll background you should ensure that not the whole background area is covered by the background - in that case the screen's original background would not be visible and the scroll-down-background would cover the scroll-up-background. Also note that only parts of the scroll backgrounds are painted when only small parts can be scrolled. These backgrounds are recommended for scroll backgrounds:
- partial-gradient: paints a vertical gradient
- image: paints an image, use 'transparent' for its color
- partial: paints a simple background in a specified vertical region
Configuration
-
To activate the scrollbar:
<variable name="polish.useScrollBar" value="true" />
-
To deactivate all scrollindicators:
<variable name="polish.deactivateScrollIndicator" value="true" />
