Main control bar main-control-bar

The main control bar is the rectangular area on desktop systems and tablets that contain all user interface controls (except Large Page buttons) available for the eCatalog viewer.

On mobile phones, it still keeps Thumbnails, Table of Contents, Download, Print, Favorites, Social share, full-screen, and Close buttons. However, First Page and Last Page buttons, and Page Indicator are removed from the main control bar and added to the secondary control bar instead. By default, the main control bar is displayed in the top of the viewer area on desktop systems and mobile phones, and moved to the bottom of the viewer area on tablets. It always takes the entire available viewer width. It is possible to change its color, height, and vertical position in the CSS, relative to the viewer container.

The appearance of the main control bar is controlled with the following CSS class selector:

.s7ecatalogviewer .s7controlbar

CSS property
Description
top
Position from the top of the viewer.
bottom
Position from the bottom of the viewer.
height
The height of the main control bar.
background-color
The background color of the main control bar.

Example - to set up a gray main control bar that is 36 pixels tall and is positioned at the top of the viewer container.

.s7ecatalogviewer .s7controlbar {
 top: 0px;
 height: 36px;
 background-color: rgba(0, 0, 0, 0.5);
}

The main control bar supports an optional scroll feature. It is activated if the viewer width is too small and there is not enough space to fit all the buttons preset in the control bar. In this case, a two-state arrow button appears in the right-hand side of the control bar. Clicking or tapping on this button scrolls all the control bar elements to the left or to the right, depending on the scroll button state. The primary use case for this feature is mobile devices with small screens in portrait orientation.

The scroll feature is enabled for the main control bar, and is disabled for the secondary control bar. The feature is turned on and off using the following CSS class selector:

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

CSS property
Description
position

When set to static the scroll feature is disabled.

Set this property to absolute to enable the scroll feature.

The scroll button is added to a special container element that positions the button properly. It lets you style the area around the button differently from the rest of the control bar background in case the height of the scroll button is smaller than the control bar height.

The appearance of this scroll button container is controlled with the following CSS class selector:

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

CSS property
Description
width
Normally should be equal or larger than the width of the scroll button itself.
background-color
Container background color.

You can size and skin the scroll button itself by way of CSS.

The appearance of this button is controlled with the following CSS class selector:

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

CSS property
Description
width
Width of button.
height
Height of button.
background-image
The image that is displayed for a given button state.
background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites.

NOTE
This button supports the state and selected attribute selectors, which can be used to apply different skins to different button states. In particular, state="selected" corresponds to the initial scroll button state when it is possible to scroll control bar contents to the left. The attribute state="default" corresponds to the state when the content is scrolled all the way to the left and the scroll button suggests returning it to the initial state.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - To enable the scroll feature in the main control bar for mobile phones. And, set up a scroll button that is 64 x 64 pixels that displays a different image for each of the 4 different button states when selected or not selected:

.s7ecatalogviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
 position: absolute;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
 width:64px;
 background-color: rgb(0, 0, 0);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
 width:64px;
 height:64px;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8