beginPosition Property

Summary

Indicates one of the bounds of the Find Text operation.

Syntax
TypeScript
JavaScript
Object.defineProperty(DocumentViewerFindText.prototype, 'beginPosition', 
	get: function(), 
	set: function(value) 
) 

Property Value

A DocumentViewerTextPosition object indicating the page number and index of the top of the text search. The default value is null, which indicates the top of the first page of the document.

Remarks

BeginPosition allows DocumentViewerText.Find to have a beginning bound. Its specification with EndPosition also decides the direction of the search.

If EndPosition is found to be "greater than" BeginPosition - meaning a higher page number or character index - the search will be conducted in the "forward" direction, incrementing through the character indices and pages from BeginPosition to EndPosition. Otherwise, the search will be conducted in a "backward" direction, decrementing through the pages and character indices, but still from the BeginPosition to the EndPosition. Thus, to change direction between calls to DocumentViewerText.Find, swap the two properties.

Since a page's text may not yet be parsed when the search bounds are being selected, both BeginPosition and EndPosition can take -1 as the value forDocumentViewerTextPosition.CharacterIndex. This value will be internally resolved to the index of the final character of the page if and when the page's text is retrieved. If DocumentViewerText.AutoGetText is false, the -1 will not resolve to a real index and the search will return no results for that page.

See Start as a way to change the start of the search from BeginPosition while maintaining BeginPosition as a bound. If FindAll or Loop are true, this could internally create two searches:

  1. Search from start to EndPosition.

  2. If start from (1) was not BeginPosition, and FindAll or Loop is true, search from BeginPosition to start – 1.

The default value is null, meaning the top of page 1.

For more information, refer to DocumentViewerText.Find.

History

19.0.0.49

Added BeginPosition and EndPosition - Replaces PageNumber and GoToNextPage

Example
TextFind.ts
ViewerInitializer.ts
TextFind.js
ViewerInitializer.js
TextFind.html
examples.css
import { ViewerInitializer } from "../utilities/ViewerInitializer"; 
 
export class TextFindTSExample { 
   public run = () => { 
      new ViewerInitializer(this.textExample); 
   } 
 
   textExample = (documentViewer: lt.Document.Viewer.DocumentViewer) => { 
      const output = document.getElementById('output'); 
      const text = documentViewer.text; 
 
      // Make sure we get the page text if necessary (otherwise, results may be empty!) 
      text.autoGetText = true; 
 
      // We will find all matches of "LEAD", ignoring the case 
      const options = new lt.Document.Viewer.DocumentViewerFindText(); 
 
      // The text 
      options.text = "LEAD"; 
      // Ignore case 
      options.matchCase = false; 
      // Any word that contains the phrase 
      options.wholeWordsOnly = false; 
 
      // Find all results in the bounds, not just the first 
      options.findAll = true; 
 
      // Highlight the results in the View 
      options.renderResults = true; 
      // Optionally, change the highlight color 
      lt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)"; 
 
      // Set direction - this value could be decided from a set of "next" and "previous" buttons 
      const isFindingNext = true; 
      // Set the bounds 
      // We set the bounds as the whole document, but below we can specify to start wherever text is selected 
      // or at the current page 
      const topOfFirstPage = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(1); 
      const bottomOfLastPage = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.pageCount); 
      if (isFindingNext) { 
         // Make the beginning bound "higher up" the page so we search "down" the page. 
         options.beginPosition = topOfFirstPage; 
         options.endPosition = bottomOfLastPage; 
      } 
      else { 
         // Make the beginning bound "lower down" the page so we search "up" the page. 
         options.beginPosition = bottomOfLastPage; 
         options.endPosition = topOfFirstPage; 
      } 
 
      // Select the first result in the View (automatically scrolls View also) 
      options.selectFirstResult = true; 
 
      if (text.hasAnySelectedText) { 
         // Setting this value to AfterSelection allows us to search forward from the selection, so multiple 
         // uses of this same options object will cycle us through all the matches! 
         // (If no selected text actually exists, search will default to beginPosition.) 
         options.start = lt.Document.Viewer.DocumentViewerFindTextStart.afterSelection; 
      } 
      else { 
         // We could start at the begin position, but it makes more UI sense to start from the user's current page. 
         // Search will loop back around to the begin position - this just changes the starting point and order of results. 
         options.start = lt.Document.Viewer.DocumentViewerFindTextStart.manualPosition; 
         if (isFindingNext) 
            options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(documentViewer.currentPageNumber); 
         else 
            options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.currentPageNumber); 
      } 
 
      // If we were just looking for the first match, we could use "loop" to loop around 
      // if we found nothing between the start position and the end bound. 
      //options.loop = true; 
 
      // You will likely want to clear the previous highlighted results 
      // on the screen so only our new results will show. 
      text.clearRenderedFoundText(); 
 
      output.innerHTML = "Searching, please wait..."; 
 
      // Search, asynchronously 
      text.find(options, function (results) { 
         const resultsCount = !!results ? results.length : 0; 
 
         let resultText; 
         if (resultsCount > 0) 
            resultText = "Found " + resultsCount + " results for '" + options.text + "'."; 
         else 
            resultText = "No matches found."; 
 
         alert(resultText); 
         output.innerHTML = resultText; 
      }); 
   } 
} 
export class ViewerInitializer { 
   private callback: (viewer: lt.Document.Viewer.DocumentViewer) => void = null; 
 
   constructor(callback?: (viewer: lt.Document.Viewer.DocumentViewer) => void) { 
      this.callback = callback; 
      this.init(); 
   } 
 
   public static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert('Error returned from service. See the console for details.') 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   private init = () => { 
      this.initFactory(); 
      this.testConnection(); 
   } 
 
   private initFactory = () => { 
      lt.RasterSupport.setLicenseUri('https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt', 'EVAL', null); 
 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000'; 
      lt.Document.DocumentFactory.servicePath = ''; 
      lt.Document.DocumentFactory.serviceApiPath = 'api'; 
   } 
 
   private testConnection = () => { 
      const serviceStatus = document.getElementById('serviceStatus'); 
      serviceStatus.innerHTML = 'Connecting to service: ' + lt.Document.DocumentFactory.serviceUri; 
 
      lt.Document.DocumentFactory.verifyService() 
         .done((serviceData) => { 
            serviceStatus.innerHTML = 'Service connection verified!'; 
            this.createDocumentViewer(); 
         }) 
         .fail((jqXHR, statusText, errorThrown) => { 
            serviceStatus.innerHTML = 'Service connection unavailable.'; 
            ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown); 
         }); 
   } 
 
   private createDocumentViewer = () => { 
      // Initialize the user interface 
      const interactiveSelect = document.getElementById('interactiveSelect'); 
 
      const panZoomOption = document.createElement('option'); 
      panZoomOption.innerHTML = 'Pan / Zoom'; 
      panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
      interactiveSelect.appendChild(panZoomOption); 
 
      const textOption = document.createElement('option'); 
      textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
      textOption.innerHTML = 'Select Text'; 
      interactiveSelect.appendChild(textOption); 
 
      let documentViewer: lt.Document.Viewer.DocumentViewer = null; 
      interactiveSelect.onchange = (e) => documentViewer.commands.run((e.target as HTMLSelectElement).value, null); 
 
      const annotationsSelect = document.getElementById('annotationsSelect'); 
 
      const annSelectOption = document.createElement('option'); 
      annSelectOption.innerHTML = 'Select Annotation'; 
      annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString(); 
      annotationsSelect.appendChild(annSelectOption); 
 
      const annLineOption = document.createElement('option'); 
      annLineOption.innerHTML = 'Line Object'; 
      annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString(); 
      annotationsSelect.appendChild(annLineOption); 
 
      const annRectOption = document.createElement('option'); 
      annRectOption.innerHTML = 'Rectangle Object'; 
      annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString(); 
      annotationsSelect.appendChild(annRectOption); 
      annotationsSelect.onchange = (e) => { 
         const value = +(e.currentTarget as HTMLSelectElement).value; 
         documentViewer.annotations.automationManager.currentObjectId = value; 
      } 
 
      // Init the document viewer, pass along the panels 
      const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
      // We are not going to use elements mode in this example 
      createOptions.viewCreateOptions.useElements = false; 
      createOptions.thumbnailsCreateOptions.useElements = false; 
 
      // The middle panel for the view 
      createOptions.viewContainer = document.getElementById('viewer'); 
      // The left panel for the thumbnails 
      createOptions.thumbnailsContainer = document.getElementById('thumbnails'); 
      // The right panel is for bookmarks 
      createOptions.bookmarksContainer = document.getElementById('bookmarks'); 
      createOptions.useAnnotations = true; 
 
      // Create the document viewer 
      documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
 
      // We prefer SVG viewing 
      documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
 
      // Create html5 rendering engine 
      documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      // Initialize documentViewer annotations 
      documentViewer.annotations.initialize(); 
 
      documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
         // When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option 
         (annotationsSelect as HTMLSelectElement).value = sender.currentObjectId; 
      }); 
 
      this.loadDefaultDoc(documentViewer, interactiveSelect as HTMLSelectElement) 
   } 
 
   private loadDefaultDoc = (viewer: lt.Document.Viewer.DocumentViewer, interactiveSelect: HTMLSelectElement) => { 
      // Load a PDF document 
      const url = 'https://demo.leadtools.com/images/pdf/leadtools.pdf'; 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc: lt.Document.LEADDocument) => { 
            const ready = () => { 
               viewer.setDocument(doc); 
               const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
               interactiveSelect.value = panZoom; 
               viewer.commands.run(panZoom, null); 
               if(this.callback) 
                  this.callback(viewer); 
            } 
 
            if (doc.isStructureSupported && !doc.structure.isParsed) 
               doc.structure.parse() 
                  .done(ready) 
                  .fail(ViewerInitializer.showServiceError); 
            else 
               ready(); 
         }) 
         .fail(ViewerInitializer.showServiceError); 
   } 
} 
import { ViewerInitializer } from "../utilities/ViewerInitializer"; 
 
export class TextFindJSExample { 
   run = () => { 
      new ViewerInitializer(this.textExample); 
   } 
 
   textExample = (documentViewer) => { 
      const output = document.getElementById('output'); 
      const text = documentViewer.text; 
 
      // Make sure we get the page text if necessary (otherwise, results may be empty!) 
      text.autoGetText = true; 
 
      // We will find all matches of "LEAD", ignoring the case 
      const options = new lt.Document.Viewer.DocumentViewerFindText(); 
 
      // The text 
      options.text = "LEAD"; 
      // Ignore case 
      options.matchCase = false; 
      // Any word that contains the phrase 
      options.wholeWordsOnly = false; 
 
      // Find all results in the bounds, not just the first 
      options.findAll = true; 
 
      // Highlight the results in the View 
      options.renderResults = true; 
      // Optionally, change the highlight color 
      lt.Document.Viewer.DocumentViewerText.foundTextFill = "rgba(255, 255, 0, .4)"; 
 
      // Set direction - this value could be decided from a set of "next" and "previous" buttons 
      const isFindingNext = true; 
      // Set the bounds 
      // We set the bounds as the whole document, but below we can specify to start wherever text is selected 
      // or at the current page 
      const topOfFirstPage = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(1); 
      const bottomOfLastPage = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.pageCount); 
      if (isFindingNext) { 
         // Make the beginning bound "higher up" the page so we search "down" the page. 
         options.beginPosition = topOfFirstPage; 
         options.endPosition = bottomOfLastPage; 
      } 
      else { 
         // Make the beginning bound "lower down" the page so we search "up" the page. 
         options.beginPosition = bottomOfLastPage; 
         options.endPosition = topOfFirstPage; 
      } 
 
      // Select the first result in the View (automatically scrolls View also) 
      options.selectFirstResult = true; 
 
      if (text.hasAnySelectedText) { 
         // Setting this value to AfterSelection allows us to search forward from the selection, so multiple 
         // uses of this same options object will cycle us through all the matches! 
         // (If no selected text actually exists, search will default to beginPosition.) 
         options.start = lt.Document.Viewer.DocumentViewerFindTextStart.afterSelection; 
      } 
      else { 
         // We could start at the begin position, but it makes more UI sense to start from the user's current page. 
         // Search will loop back around to the begin position - this just changes the starting point and order of results. 
         options.start = lt.Document.Viewer.DocumentViewerFindTextStart.manualPosition; 
         if (isFindingNext) 
            options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createBeginOfPage(documentViewer.currentPageNumber); 
         else 
            options.manualStartPosition = lt.Document.Viewer.DocumentViewerTextPosition.createEndOfPage(documentViewer.currentPageNumber); 
      } 
 
      // If we were just looking for the first match, we could use "loop" to loop around 
      // if we found nothing between the start position and the end bound. 
      //options.loop = true; 
 
      // You will likely want to clear the previous highlighted results 
      // on the screen so only our new results will show. 
      text.clearRenderedFoundText(); 
 
      output.innerHTML = "Searching, please wait..."; 
 
      // Search, asynchronously 
      text.find(options, function (results) { 
         const resultsCount = !!results ? results.length : 0; 
 
         let resultText; 
         if (resultsCount > 0) 
            resultText = "Found " + resultsCount + " results for '" + options.text + "'."; 
         else 
            resultText = "No matches found."; 
 
         alert(resultText); 
         output.innerHTML = resultText; 
      }); 
   } 
} 
export class ViewerInitializer { 
   constructor(callback) { 
      this.callback = callback; 
      this.init(); 
   } 
 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details.") 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   init = () => { 
      this.initFactory(); 
      this.testConnection(); 
   } 
 
   initFactory = () => { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
      lt.Document.DocumentFactory.servicePath = ""; 
      lt.Document.DocumentFactory.serviceApiPath = "api"; 
   } 
 
   testConnection = () => { 
      const serviceStatus = document.getElementById("serviceStatus"); 
      serviceStatus.innerHTML = "Connecting to service: " + lt.Document.DocumentFactory.serviceUri; 
 
      lt.Document.DocumentFactory.verifyService() 
         .done((serviceData) => { 
            serviceStatus.innerHTML = "Service connection verified!"; 
            this.createDocumentViewer(); 
         }) 
         .fail((jqXHR, statusText, errorThrown) => { 
            serviceStatus.innerHTML = "Service connection unavailable."; 
            ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown); 
         }); 
   } 
 
   createDocumentViewer = () => { 
      // Initialize the user interface 
      const interactiveSelect = document.getElementById("interactiveSelect"); 
 
      const panZoomOption = document.createElement("option"); 
      panZoomOption.innerHTML = "Pan / Zoom"; 
      panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
      interactiveSelect.appendChild(panZoomOption); 
 
      const textOption = document.createElement("option"); 
      textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
      textOption.innerHTML = "Select Text"; 
      interactiveSelect.appendChild(textOption); 
 
      let documentViewer = null; 
      interactiveSelect.onchange = (e) => documentViewer.commands.run(e.target.value, null); 
 
      const annotationsSelect = document.getElementById("annotationsSelect"); 
 
      const annSelectOption = document.createElement("option"); 
      annSelectOption.innerHTML = "Select Annotation"; 
      annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString(); 
      annotationsSelect.appendChild(annSelectOption); 
 
      const annLineOption = document.createElement("option"); 
      annLineOption.innerHTML = "Line Object"; 
      annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString(); 
      annotationsSelect.appendChild(annLineOption); 
 
      const annRectOption = document.createElement("option"); 
      annRectOption.innerHTML = "Rectangle Object"; 
      annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString(); 
      annotationsSelect.appendChild(annRectOption); 
      annotationsSelect.onchange = (e) => { 
         const value = +e.currentTarget.value; 
         documentViewer.annotations.automationManager.currentObjectId = value; 
      } 
 
      // Init the document viewer, pass along the panels 
      const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
      // We are not going to use elements mode in this example 
      createOptions.viewCreateOptions.useElements = false; 
      createOptions.thumbnailsCreateOptions.useElements = false; 
 
      // The middle panel for the view 
      createOptions.viewContainer = document.getElementById("viewer"); 
      // The left panel for the thumbnails 
      createOptions.thumbnailsContainer = document.getElementById("thumbnails"); 
      // The right panel is for bookmarks 
      createOptions.bookmarksContainer = document.getElementById("bookmarks"); 
      createOptions.useAnnotations = true; 
 
      // Create the document viewer 
      documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
 
      // We prefer SVG viewing 
      documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
 
      // Create html5 rendering engine 
      documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      // Initialize documentViewer annotations 
      documentViewer.annotations.initialize(); 
 
      documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
         // When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option 
         annotationsSelect.value = sender.currentObjectId; 
      }); 
 
      this.loadDefaultDoc(documentViewer, interactiveSelect) 
   } 
 
   loadDefaultDoc = (viewer, interactiveSelect) => { 
      // Load a PDF document 
      const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc) => { 
            const ready = () => { 
               viewer.setDocument(doc); 
               const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
               interactiveSelect.value = panZoom; 
               viewer.commands.run(panZoom, null); 
               if(this.callback) 
                  this.callback(viewer); 
            } 
 
            if (doc.isStructureSupported && !doc.structure.isParsed) 
               doc.structure.parse() 
                  .done(ready) 
                  .fail(ViewerInitializer.showServiceError); 
            else 
               ready(); 
         }) 
         .fail(ViewerInitializer.showServiceError); 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>DocViewer Example | DocumentViewer</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../LT/Leadtools.js"></script> 
   <script src="../LT/Leadtools.Controls.js"></script> 
   <script src="../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../LT/Leadtools.Document.js"></script> 
   <script src="../LT/Leadtools.Document.Viewer.js"></script> 
   <link rel="stylesheet" type="text/css" href="../css/examples.css"> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../bundle.js" type="text/javascript"></script> 
</head> 
 
 
<body> 
   <div class="container"> 
      <div class="toolbar"> 
         <div class="vcenter push-right"> 
            <button type="button" id="exampleButton">Run Example</button> 
         </div> 
         <div class="vcenter push-right"> 
            <label for="interactiveSelect">Interactive mode:</label> 
            <select id="interactiveSelect"></select> 
         </div> 
         <div class="vcenter push-right"> 
            <label for="annotationsSelect">Annotations objects:</label> 
            <select id="annotationsSelect"></select> 
         </div> 
         <div id="output" class="vcenter push-right"></div> 
         <div id="serviceStatus" class="vcenter push-right"></div> 
      </div> 
      <div class="docContainer"> 
         <div class="sidepanel" id="thumbnails"></div> 
         <div class="centerpanel" id="viewer"></div> 
         <div class="sidepanel" id="bookmarks"></div> 
      </div> 
   </div> 
</body> 
<script> 
   window.onload = () => { 
      const button = document.getElementById('exampleButton'); 
      button.onclick = () => { 
         const example = new window.examples.TextFindExample(); 
         example.run(); 
      } 
   }; 
</script> 
 
</html> 
 /* 
   Remove default body styling. 
   Set the body to flex as a column; 
*/ 
body { 
   margin: 0; 
   display: flex; 
   flex-direction: column; 
} 
 
.container { 
   margin: 10px; 
   width: calc(100% - 20px); 
   height: calc(100vh - 20px); 
} 
 
.toolbar { 
   height: 5%; 
   width: 100%; 
   border-bottom: 2px solid #333; 
   flex-direction: row; 
   display: flex; 
} 
#bookmarks{ 
   overflow: hidden; 
} 
 
.vcenter { 
   margin-top: auto; 
   margin-bottom: auto; 
} 
 
.hcenter{ 
   margin-left: auto; 
   margin-right: auto; 
} 
 
.push-right{ 
   margin-left: 10px; 
} 
 
.docContainer{ 
   height: 95%; 
   width: 100%; 
   display: flex; 
   flex-direction: row; 
} 
 
.sidepanel{ 
   width: 15%; 
   height: 100%; 
} 
 
.centerpanel{ 
   width:100%; 
   height:100%; 
} 
 
 /* Styles for Elements Mode. */ 
 .lt-item, .lt-image-border { 
   /* Box Shadow (view, item, image border) */ 
   box-shadow: #333 2px 2px 5px 1px; 
 } 
 .lt-view,.lt-thumb-item { 
   /* View */ 
   margin: 5px; 
   padding: 5px; 
 } 
 .lt-item { 
   /* Item */ 
   border: 2px solid #6ecaab; 
   background-color: #b2decf; 
   padding: 10px; 
 } 
 .lt-image-border { 
   /* Image Border */ 
   border: 3px solid #444; 
   background-color: white; 
 } 
 .lt-thumb-item { 
   /* Thumbnail Item */ 
   border: 2px solid #6ecaab; 
   background-color: #b2decf; 
 } 
 .lt-thumb-item.lt-thumb-item-selected { 
   /* Selected Thumbnail Item */ 
   border: 2px solid #59b2ba; 
   background-color: #8ce1e1; 
 } 
 .lt-thumb-item-hovered { 
   /* Hovered Thumbnail Item */ 
   border: 2px solid #52b996; 
   background-color: #87c7b1; 
 } 
 .small-modal { 
   max-width: 200px; 
   width: 200px; 
 } 
Requirements

Target Platforms

Help Version 22.0.2023.4.18
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Document.Viewer Assembly

Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.