ASP.NET MVC コントロールヘルプ
FlexViewerのスタイル設定
コントロールの使用 > FlexViewer > FlexViewerのスタイル設定

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.