Show Menu
TOPICS×

Secondary control bar

The secondary control bar is the rectangular area that contains First and Last Page buttons and a Page Indicator when made available in CSS.
By default, it is displayed on mobile phones only and is located in the bottom of the viewer. It always takes the whole available viewer width. It is possible to change its color, height and vertical position by CSS, relative to the viewer container.
The appearance of the secondary control bar is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7secondarycontrols .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 secondary control bar.
Example - to set up a gray secondary control bar that is 72 pixels tall and is positioned at the bottom of the viewer container.
.s7ecatalogsearchviewer .s7secondarycontrols .s7controlbar {  
 bottom: 0px; 
 height: 72px; 
}