CSS classes for the FlexViewer control are as follows:
FlexViewer CSS Classes| Class | Description |
|---|---|
| Basic | |
| .wj-viewer | Styles the div host element of the FlexViewer control. |
| .wj-viewer .wj-viewer-outer | Styles the top and left toolbar containers. |
| .wj-viewer wj-viewer-container | Styles the viewer container of the FlexViewer control which includes the report display area and the left panel. |
| .wj-viewer .wj-viewer-loading | Styles the viewer when it is in loading state. |
| .wj-viewer .wj-viewer-loading.errormessage | Styles the div host element that represents the error message. |
| .wj-viewer .wj-magnifier | Styles the magnified area displayed while using the magnifier option from the toolbar. |
| Toolbar | |
| .wj-viewer .wj-toolbar | Styles the div host element of the toolbar. |
| .wj-viewer .wj-toolbarcontainer | Styles the container div that represents the toolbar elements. |
| .wj-viewer .wj-btn-group | Styles the div host element that represents the button group in the toolbar. |
| .wj-viewer .wj-btn-group > .wj-btn | Styles each button in the button group. |
| .wj-viewer .wj-toolbar-move.right | Styles the right move button on the right end of the toolbar. |
| .wj-viewer .wj-toolbar-move.left | Styles the left move button on the left end of the toolbar. |
| .wj-viewer .wj-toolbar-move .wj-glyph-left | Styles the left-arrow icon displayed on the left move button. |
| .wj-viewer .wj-toolbar-move .wj-glyph-right | Styles the right-arrow icon displayed on the right move button. |
| .wj-viewer .wj-toolbarwrapper | Styles the toolbar wrapper. |
| .wj-viewer .wj-toolbarwrapper.wj-btn-group>:not(.wj-control) | Styles the div element containing button(s) in the toolbar. |
| .wj-viewer .wj-toolbarwrapper.wj-btn-group > .wj-separator | Styles the separators placed between the buttons in the toolbar. |
| .wj-viewer .wj-toolbarwrapper .wj-pagenumber | Styles the area where the page number is displayed in the toolbar. |
| .wj-viewer .wj-toolbarwrapper .wj-pagecount | Styles the area where the page count is displayed in the toolbar. |
| .wj-viewer .wj-toolbarwrapper .wj-input-zoom | Styles the area where the user can input the zoom value. |
| .wj-viewer .wj-toolbarwrapper .slash | Styles the slash used to divide the current page and total pages in the toolbar. |
| Left Panel | |
| .wj-viewer wj-viewer-leftpanel | Styles the left panel of the FlexViewer control. |
| .wj-viewer .wj-nav | Styles the list of options displayed in the left panel of the viewer. |
| .wj-viewer .wj-tabcontent | Styles the tab pane displayed when an option is clicked/selected in the left panel. |
| .wj-viewer .wj-tabcontent .active | Styles the currently active tab pane of the left panel. |
| .wj-viewer .wj-tabcontent h3 | Styles the tab pane header. |
| .wj-viewer .wj-tabcontent .wj-tabpane .wj-tabcontent-inner | Styles the inner section of tab pane. |
| .wj-viewer .wj-tabtitle-wrapper .wj-close | Styles the close button used for closing a tab pane. |
| Left Panel Options Tabs | |
| Page Thumbnails Tab Pane | |
| .wj-viewer .wj-thumbnaillist | Styles the Thumbnail List tab pane. |
| .wj-viewer .wj-thumbnail-item | Styles the thumbnail item. |
| .wj-viewer .wj-thumbnail-item .wj-pagethumbnail | Styles the thumbnail page. |
| .wj-viewer .wj-thumbnail-item.wj-state-selected | Styles the currently selected thumbnail item. |
| Document Map Tab Pane | |
| .wj-viewer .wj-outlines-tree | Styles the Document Map tab pane. |
| Parameters Tab Pane | |
| .wj-viewer .wj-parameterscontainer | Styles the container div that includes the report parameter section in the viewer. |
| .wj-viewer .wj-parametercontainer | Styles the container div that represents the report parameter in the viewer. |
| .wj-viewer .wj-parametercontainer .wj-parametercontrol | Styles the input control which is used to input the report parameter value. |
| .wj-parameterhead | Styles the header of parameter. |
| Search Tab Pane | |
| .wj-viewer .wj-tabcontent-wrapper.search-wrapper | Styles the wrapper layout for search tab pane. |
| .wj-viewer .wj-searchoption | Styles the search options available in the Search tab pane. |
| .wj-viewer .wj-searchoption input | Styles the input controls which is used to toggle the search options. |
| .wj-viewer .wj-searchoption label | Styles the label used to represent the text for the search options. |
| .wj-viewer .wj-searchresult | Styles the search results header in the Search tab pane. |
| .wj-viewer .wj-searchresultlist | Styles the search result list section. |
| .wj-search-page | Styles the page number of search result in search pane. |
| .wj-viewer .wj-searchresultlist .wj-search-item | Styles the search result item. |
| .wj-viewer .wj-searchresultlist .wj-search-item .wj-search-text | Styles the search text displayed in the search result section. |
| .wj-viewer .wj-searchbar | Styles the search bar which is displayed when you click on the search button from the mobile toolbar. |
| .wj-viewer .wj-control .wj-applybutton | Styles the apply button displayed in the Parameters tab pane. |
| .wj-viewer .wj-searchbox | Styles the search box that appears in the Search tab pane. |
| .wj-viewer .wj-searchcontainer | Styles the container div element that represents the search box. |
| .wj-viewer .mobile .wj-searchbox | Styles the search box that appears in the Search tab pane in mobile mode. |
| .wj-viewer .wj-searchcontainer .wj-btn-group | Styles the container div element that represents the search-pre and search-next buttons. |
| Export Tab Pane | |
| .wj-viewer .wj-tabcontent legend | Styles the legend entries displayed in the Export tab. |
| .wj-viewer .wj-tabtitle-wrapper .wj-exportcontainer label | Styles the label used for the Export tab. |
| .wj-viewer .wj-tabcontent-wrapper.wj-exportformats-wrapper | Styles the wrapper layout for export tab pane. |
| .wj-viewer .wj-tabcontent-wrapper.wj-exportformats-wrapper .wj-export-editor | Styles the export options section on the export tab pane. |
| .wj-viewer .wj-tabcontent-wrapper.wj-exportformats-wrapper .wj-export-editor .wj-exportformats-group | Styles the different export format groups on the export tab pane. |
| .wj-viewer .wj-tabcontent-wrapper.wj-exportformats-wrapper .wj-exportformats-footer | Styles the footer section in the export tab pane. |
| Splitter | |
| .wj-viewer .wj-viewer-splitter button | Styles the splitter panel of FlexViewer control. |
| .wj-viewer .wj-viewer-splitter span | Styles the glyph icon represented for the viewer splitter. |
| View Page | |
| .wj-viewer .wj-pageview | Styles the page view panel of the FlexViewer. |
| .wj-view-page | Styles the report page in the viewer. |
| .wj-viewer .wj-view-page .wj-loading | Styles the view page when it is in the loading state. |
| .wj-viewer .wj-view-page rect | Styles the SVG rect elements that are used to render different section of the report in the viewer. |
| .wj-viewer .wj-pageview-vscroller | Styles the vertical scroll bar. |
| Mini Toolbar | |
| .wj-viewer .wj-mini-toolbar | Styles the mini toolbar that appears at the bottom of the viewer. By default, it is hidden and appears when the viewer switches to full screen mode. |
| .wj-viewer .wj-mini-toolbar .slash | Styles the slash used to divide the current page and total pages in the mini toolbar. |
| .wj-viewer .wj-mini-toolbar .wj-pagenumber | Styles the area where the page count is displayed in the mini toolbar. |
| .wj-viewer .wj-mini-toolbar .wj-pagenumber input | Styles the area where user can input the page number in the mini toolbar. |
| .wj-viewer .wj-mini-toolbar .wj-toolbar-move | Styles the mini toolbar move buttons. |
| Mobile CSS Classes | |
| .wj-viewer .mobile.with-footer | Styles the footer section of the viewer in mobile view. |
| .wj-viewer .mobile.with-searchbar | Styles the search bar section of the viewer in mobile view. |
| .wj-viewer .mobile .wj-viewer-leftpanel | Styles the left panel of the FlexViewer control in mobile view. |
| .wj-viewer .mobile .wj-viewer-splitter | Styles the div host element of the viewer splitter in mobile view. |
| .wj-viewer .mobile .wj-toolbar | Styles the div host element of the toolbar in mobile view. |
| .wj-viewer .mobile .wj-toolbar .wj-pagenumber | Styles the area where the page number is displayed in the toolbar. |
| .wj-viewer .mobile .wj-toolbar .wj-pagecount | Styles the area where the page count is displayed in the toolbar. |
| .wj-viewer .mobile .wj-toolbar .wj-toolbar-move | Styles the toolbar move buttons. |
| .wj-viewer .mobile .wj-nav | Styles the navigation list displayed on the left panel of the viewer. |
| .wj-viewer .mobile .wj-viewer-tabsleft | Styles the tab on the left panel of the viewer. |
| .wj-viewer .mobile .wj-tabcontent | Styles the tab content section on the left panel. |
| .wj-viewer .mobile .wj-tabcontent .wj-tabpane .wj-tabtitle-wrapper | Styles the wrapper layout for the tab title. |
| .wj-viewer .mobile .wj-tabcontent .active | Styles the currently active tab in the left panel. |
| .wj-viewer .mobile .wj-btn-group > .wj-btn | Styles the buttons displayed in the viewer. |
| .wj-viewer .mobile .wj-viewer-footer | Styles the footer section of the mobile viewer. |
| .wj-viewer.full-screen | Styles the viewer in the full screen mode. |
| .wj-viewer.full-screen .wj-viewer-outer | Styles the outer boundaries of the FlexViewer control in full screen mode. |
| .wj-viewer.full-screen .wj-viewer-outer.mobile | Styles the outer boundaries of the FlexViewer control in full screen mode. |
| .wj-viewer.full-screen .wj-viewer-outer.mobile .wj-toolbar | Styles the div host element of the toolbar. |
| .wj-viewer.full-screen .wj-viewer-outer.mobile .wj-mini-toolbar | Styles the mini toolbar in mobile view mode. |
| .wj-viewer .wj-btn-group .wj-btn.wj-state-active svg.wj-svg-btn | Styles the buttons that are currently in active state. |
| .wj-viewer .wj-btn-group .wj-btn:hover svg.wj-svg-btn | Styles the buttons |
| .wj-viewer-menu.wj-btn-group-vertical .wj-listbox-item.wj-state-active .wj-btn .wj-svg-btn | Styles the currently active list box item in the viewer menu. |
| .wj-viewer-menu > .wj-listbox-item | Styles the list box item in the viewer menu. |
| .wj-viewer-menu > .wj-listbox-item a.wj-btn | Styles the button images in the viewer menu. |
| Viewer Footer | |
| .wj-viewer .wj-viewer-footer | Styles the footer section. This is only visible in the mobile mode. |
| .wj-viewer .wj-viewer-footer .wj-toolbar | Styles the toolbar available in the footer section. |
| .wj-viewer .wj-viewer-footer .wj-close | Styles the close button displayed in the toolbar. |