Flyout Zoom View flyout-zoom-view

In inline zoom mode, the main view consists of the static image. It also consists of the zoomed image shown in the flyout view over the static image, and the tip message shown on top of static image.

CSS properties of the main viewer area

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

.s7mixedmediaviewer .s7flyoutzoomview
CSS property
Description
background-color
The background color of the main view.

Example - to make the main view transparent:

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

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

.s7mixedmediaviewer .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 properties of the tip message

CSS property
Description
background-color
Message background fill color.
border-radius
Message background border radius.
bottom
Offset from the bottom of the main view.
color
Tip text color.
font-size
Font size.
font-family
Font family.
opacity
Message background opacity.
padding
Padding around the message text.

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Ā® 12-px font, 50 pixels offset from the bottom of the main view, padding, and a rounded border:

.s7mixedmediaviewer .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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8