Flyout zoom view

The main view consists of the static image, the zoomed image shown in the flyout view on top of the static image, and the tip message shown on top of static image.

CSS properties of the main view

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

.s7flyoutviewer .s7flyoutzoomview

CSS property

Description

background-color

The background color of the main view.

Example - to make the main view transparent:

.s7flyoutviewer .s7flyoutzoomview { 
 background-color: transparent; 
}

CSS properties of the tip message

The appearance of the tip message is controlled with the following CSS class selector:

.s7flyoutviewer .s7flyoutzoomview .s7tip

It is possible to configure font style, size appearance and vertical offset through CSS. However, horizontal alignment is managed by the viewer logic. Overriding it through CSS using left or right properties is not supported.

CSS property

Description

bottom

Offset from the bottom of the main view.

color

Text color.

font-family

Font name.

font-size

Font size.

padding

Padding around the message text.

background-color

Background fill color of message text.

border-radius

Background border radius of message text.

opacity

Background opacity of message text.

For Internet Explorer 8, use filter:alpha(opacity-…) )

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

.

Example - to set up semi-transparent tip message with white Arial 12px font, 50 pixels offset from the bottom of the main view, padding, and a rounded border:

.s7flyoutviewer .s7flyoutzoomview .s7tip { 
bottom: 50px; 
color: #ffffff; 
font-family: Arial; 
font-size: 12px; 
padding-bottom: 10px; 
padding-top: 10px; 
padding-left: 12px; 
padding-right: 12px; 
background-color: #000000; 
border-radius: 4px; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
}

On this page