Note:
The values you find in here for spacing and layouting can not be used
with the grid layout control currently in usage, and are not meant to
be used with it. The grid layout control as the current SAP layouting
tool does only support very simple design possibilities. For information
how to use the grid layout control see: Grid
Layout / Usage and Types.
A new form layout control is being developed and will be available latest
with the 6.0 version of the portal. The pages about spacing you find under
the first point "1. General" have been written to support the development
of the form layout tool, and to meet the necessities of future design
needs in advance.
Spacing Between Grouped Controls
Spacing in a Tray | What's a Correct Spacing Good for | Spacing between Groups | Spacing between Group Controls with Header and Border | Spacing of Elements in Groups | Arranging Groups | Spacing Soft Groups
This page describes the detailed spacing between grouped controls. For the spacing between single controls, see Spacing Between Single Controls.
The following issues are covered here:
- Spacing in a Tray - the offset between a tray's border and its content
- What's a Correct Spacing Good for - the reasoning behind tray offsets and caesuras
- Spacing between Groups - the spacing between primary and secondary groups, that is, between nested groups
- Spacing between Group Controls with Header and Border - this comprises more complex controls and the groups
- Spacing of Elements in Groups - the offset within groups, such as the offset between the group border and its content and the group header and its content
- Arranging Groups - Alignment of groups and offsets between groups within trays
- Spacing Soft Groups - Spacing rules for groupings that do not use a group control as container
The spacing rules in short:
- Offset between tray border/header and content: 5 pixels
- Spacing between primary and secondary groups: 10 pixels
- Spacing between group controls with header and border: 10 pixels
- Offset within groups, i.e. between group border and content: 5 pixels
- Spacing within groups: 10 pixels between title and content, 10 pixels between content and buttons
- Spacing between soft groups: 15 pixels horizontally, 30 pixels vertically
Below you find positive and some negative examples for these cases.
Spacing in a Tray
|
This
part of the HTMLB guidlines has been updated. The former specifications
for the tray offset are not valid any longer. The old specifications
are now striked through and replaced by new ones. The reason for this is that due to technical reasons in EP50 the tray did not deliver the 5 pixel offset it was supposed to, though the grid layout control did so. Thus an offset of only five pixels was possible. With EP60 the offset for the tray content will be delivered by the tray itself. See the further specifications. |
| Figure 1a: Offset around a tray
in EP50. The tray offset was only delivered by the grid layout control and thus is only 5 pixels and not 10 as assumed.
|
|
|
By EP6.0 the whole content offset of a tray will be delivered by the tray itself. With the new design for EP60 new design specifications have been made. The new tray offset is specified in the picture on the left. |
| Figure 1b: Offset around a tray
in EP60
|
|
|
Although you do not always need an offset on the right side, you must always give one to the tray. Whether the offset is needed, depends to the tray's current size which is dependent to the current layout of the portal. |
| Figure 2: Example of an offset
around a tray
|
|
|
Avoid this. No offset at all gives the impression of elements falling out of the tray. |
| Figure 3: Example of a wrong offset around a tray | |
What's a Correct Spacing Good for
We use offsets for both groupings and caesuras. In the above examples
a 5 pixel offset around the tray's content area ensures that a tray's
content is realized as being in the tray.
Caesuras separate areas from each other. They stress the individual character
of the single area, for instance the group.
