By default, the sections panel in IEG is displayed in a vertical alignment, from the first section at the top to the last section at the bottom.
By setting the configuration property sectionspanel.style=horizontal, it is possible to display the panel horizontally along the top of the page instead.
In addition, configuration properties can be set to control the display of the sections panel in both formats. The following properties are applicable to both horizontal and vertical layouts:
| Property | Description |
|---|---|
| sectionspanel.border.color | The border color of the sections panel. |
| sectionspanel.background.color | The background color for the sections panel. |
| sectionspanel.background.image | The background image for the sections panel. |
| sectionspanel.selected.color | The text color for the currently selected section. |
| sectionspanel.selected.border.color | The border color of the currently selected section. |
| sectionspanel.selected.background.color | The background color for the currently selected section. |
| sectionspanel.selected.background.image | The background image for the currently selected section. |
| sectionspanel.enabled.border.color | The border color for enabled sections. |
| sectionspanel.enabled.background.color | The background color for the enabled sections. |
| sectionspanel.enabled.background.image | The background image for the enabled sections. |
| sectionspanel.desc.prev | The description/alt text for a completed section. The parameter is the section title. |
| sectionspanel.desc.current | The description/alt text for the current section. The parameter is the section title. |
The configuration properties that apply only to the horizontal sections panel are outlined below:
| Property | Description |
|---|---|
| sectionspanel.horizontal.max.display | The maximum number of sections to display in the panel at any one time. |
| sectionspanel.horizontal.arrow.move.amount | The number of sections to move on the panel when navigating using the left and right arrows. |
| sectionspanel.horizontal.truncate.limit | The number of characters displayed for the section title in the panel before the string is truncated. |
| sectionspanel.horizontal.text.top.margin | Used to change the position of the text in the horizontal panel. |
| sectionspanel.horizontal.text.size | The size of the text displayed in the horizontal panel. |
| sectionspanel.horizontal.background.color | The background color of the horizontal sections panel. |
| sectionspanel.horizontal.border.color | The border color of the horizontal sections panel. |
| sectionspanel.horizontal.enabled.color | The background color for the enabled sections in the horizontal panel. |
| sectionspanel.horizontal.enabled.text.color | The text color for the enabled sections in the horizontal panel. |
| sectionspanel.horizontal.text.disabled.color | The text color for the disabled horizontal sections. |
| sectionspanel.horizontal.bar.text.color | The color of text in the bar that displays the current section title. |
| sectionspanel.horizontal.bar.text.color | The color of text in the bar that displays the current section title. |
| sectionspanel.horizontal.bar.background.color | The background color of the bar that displays the current section title. |
| sectionspanel.horizontal.bar.background.color | The background color of the bar that displays the current section title. |
| sectionspanel.horizontal.enabled.background.image | The background image for the enabled horizontal sections. |
| sectionspanel.horizontal.box.height | The height of the individual section 'boxes'. |
| sectionspanel.horizontal.box.width | The width of the individual section 'boxes'. |
| sectionspanel.horizontal.back.arrow.image | An image used as the icon for the link to navigate through the sections panel. |
| sectionspanel.horizontal.next.arrow.image | An image used as the icon for the link to navigate through the sections panel. |
| sectionspanel.horizontal.back.arrow.title | The title/alt text for the icon link to navigate through the sections panel. |
| sectionspanel.horizontal.next.arrow.title | The title/alt text for the icon link to navigate through the sections panel. |
| sectionspanel.horizontal.arrow.width | The width of the divs holding the section navigation links/icons. |