backgroundColor Property

Summary

Gets the form field background color.

Syntax
TypeScript
JavaScript
Object.defineProperty(DocumentFormField.prototype, 'backgroundColor', 
   get: function() 
) 
readonly backgroundColor: string; 

Property Value

The BackgroundColor used to fill this form field object. The default value is null.

Remarks

This property should be used to fill the interior of the form field object. Each object renderer is responsible for determining whether to use this property and the interior of the form field object.

Example
DocumentFormFields.ts
ViewerInitializer.ts
DocumentFormFields.js
ViewerInitializer.js
DocumentFormFields.html
examples.css
import { ViewerInitializer } from "../../utilities/ViewerInitializer"; 
import { documentViewer } from "../../utilities/ViewerInitializer"; 
 
 
export class DocumentFormFields { 
    public run = () => { 
        new ViewerInitializer(); 
    } 
 
    getData() { 
        var doc = documentViewer.document; 
        documentViewer.prepareToSave(); 
        if (doc.formFields.hasFormFields) { 
            var containers: lt.Document.DocumentFormFieldsContainer[] = doc.formFields.getFormFields(); 
            //This will loop all the fields and change the values of the DocumentTextFormFields to 'LEADTOOLS PDF Forms', uncomment the below code to see it in action 
            // for (let i = 0; i < containers.length; i++) { 
            //     for (let j = 0; j < containers[i].children.count; j++) { 
            //         if (containers[i].children.item(j) != null && containers[i].children.item(j).type == "DocumentTextFormField") { 
            //             containers[i].children.item(j).value = "LEADTOOLS PDF Forms"; 
            //         } 
            //     } 
            // } 
            //Loops through on all the pages and fields of each page and outputs the results in the console 
            for (let i = 0; i < containers.length; i++) { 
                for (let j = 0; j < containers[i].children.count; j++) { 
                    console.log(`-------------------------- Page ${i + 1} - Field ${j + 1} ---------------------------------`) 
                    console.log(`ID: ${containers[i].children.item(j).id}`); 
                    console.log(`Name: ${containers[i].children.item(j).name}`); 
                    console.log(`Bounds: ${containers[i].children.item(j).bounds}`); 
                    console.log(`Background color: ${containers[i].children.item(j).backgroundColor}`); 
                    console.log(`Printable: ${containers[i].children.item(j).printable}`); 
                    console.log(`Viewable: ${containers[i].children.item(j).viewable}`); 
                    console.log(`Locked: ${containers[i].children.item(j).locked}`); 
                    console.log(`Required: ${containers[i].children.item(j).required}`); 
                    console.log(`Read Only: ${containers[i].children.item(j).readOnly}`); 
                    console.log(`Border Style: ${containers[i].children.item(j).borderStyle.style}`); 
                    console.log(`Border Color: ${containers[i].children.item(j).borderStyle.color}`); 
                    console.log(`Border Width: ${containers[i].children.item(j).borderStyle.width}`); 
                    console.log(`Font Name: ${containers[i].children.item(j).textStyle.fontName}`); 
                    console.log(`Font Size: ${containers[i].children.item(j).textStyle.fontSize}`); 
                    console.log(`Font Color: ${containers[i].children.item(j).textStyle.color}`); 
                    console.log(`Font Alignment: ${containers[i].children.item(j).textStyle.textAlignment}`); 
                    console.log(`Type: ${containers[i].children.item(j).type}`); 
 
                    if (containers[i].children.item(j).type == "DocumentTextFormField") { 
                        console.log(`Value: ${containers[i].children.item(j).value}`) 
                        console.log(`Content Type: ${containers[i].children.item(j).contentType}`); 
                        console.log(`Max Length: ${containers[i].children.item(j).maxLength}`) 
                        console.log(`Multi-Line: ${containers[i].children.item(j).multiline}`) 
                        console.log(`Password: ${containers[i].children.item(j).isPassword}`) 
                        console.log(`Comb: ${containers[i].children.item(j).isComb}`) 
                    } 
                    if (containers[i].children.item(j).type == "DocumentChoiceFormField") { 
                        console.log(`Options Display Value: ${containers[i].children.item(j).optionsDisplayValue}`) 
                        console.log(`Options Exported Value: ${containers[i].children.item(j).optionsExportedValue}`); 
                        console.log(`Selected Indices: ${containers[i].children.item(j).selectedIndices}`) 
                        console.log(`Multi-Select: ${containers[i].children.item(j).multiSelect}`) 
                        console.log(`Choice Type: ${containers[i].children.item(j).choiceType}`) 
                    } 
                    if (containers[i].children.item(j).type == "DocumentButtonFormField") { 
                        console.log(`Checked: ${containers[i].children.item(j).isChecked}`) 
                        if (containers[i].children.item(j).buttonType == 0) { 
                            console.log(`Button Type: Check Box`); 
                        } else { 
                            console.log(`Button Type: Radio Button`); 
                        } 
                    } 
                } 
            } 
        } 
        else { 
            console.log("This document does not have PDF Form Fields") 
        } 
    } 
} 
export var documentViewer: lt.Document.Viewer.DocumentViewer = null; 
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: any, statusText: any, errorThrown: any) => { 
        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.setLicense(); 
        this.initFactory(); 
        this.createDocumentViewer(); 
    } 
      
    // Set the LEADTOOLS Evaluation license 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                console.log(msg); 
            } 
        }); 
    } 
 
    // Before we call the service, we need to explain where it is ("localhost:40000/api", for example): 
    initFactory = () => { 
        lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
        lt.Document.DocumentFactory.servicePath = ""; 
        lt.Document.DocumentFactory.serviceApiPath = "api"; 
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response: ResponseType | any) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR: string, statusText: string, errorThrown: string) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    private createDocumentViewer = () => { 
        // Create the options object for the DocumentViewer 
        var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
        createOptions.viewCreateOptions.useElements = true; 
        createOptions.thumbnailsCreateOptions.useElements = false; 
        // Set viewContainer to #documentViewer 
        createOptions.viewContainer = document.getElementById("content"); 
        // Create the document viewer 
        documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
        // We prefer SVG viewing over Image viewing for this example 
        documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
        // To use Image: lt.Document.Viewer.DocumentViewerItemType.image; 
        documentViewer.view.imageViewer.autoCreateCanvas = true; 
        this.loadDefaultDoc(documentViewer) 
    } 
 
    private loadDefaultDoc = (viewer: lt.Document.Viewer.DocumentViewer) => { 
        var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
        var loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
        loadDocumentOptions.loadFormFieldsMode = 1; 
        // Call the "LoadFromUri" and pass success and failure callbacks to the promise 
        lt.Document.DocumentFactory.loadFromUri(url, loadDocumentOptions) 
            .done((document: lt.Document.LEADDocument) => { 
                const ready = () => { 
                    documentViewer.setDocument(document); 
                    this.registerClickEvents(); 
                    if (document.formFields.hasFormFields) { 
                        console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information") 
                    } else { 
                        console.log("This document does not have PDF Form Fields") 
                    } 
                } 
 
                if (document.isStructureSupported && !document.structure.isParsed) 
                    document.structure.parse() 
                        .done(ready) 
                        .fail(ViewerInitializer.showServiceError); 
                else 
                    ready(); 
            }) 
            .fail((ViewerInitializer.showServiceError)); 
    } 
    //Initialize the onclick events for our two buttons 
    registerClickEvents = () => { 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) => { 
            this.selectAndLoadFile(); 
        } 
    } 
 
    selectAndLoadFile() { 
        //creates an input element on the Import Document button to upload files  
        //into the document editor  
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            //Set the cursor to an idle animations 
            document.body.style.cursor = 'wait'; 
            //Create the document loading options 
            const loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
            loadDocumentOptions.loadFormFieldsMode = 1; 
            //load the document from a file using the options 
            lt.Document.DocumentFactory.loadFromFile(file, loadDocumentOptions) 
                .then((doc: lt.Document.LEADDocument) => { 
                    //set the new document in the document viewer 
                    documentViewer.setDocument(doc); 
                    //check to see if the document has form fields 
                    if (doc.formFields.hasFormFields) { 
                        console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information") 
                    } 
                    else { 
                        console.log("This document does not have PDF Form Fields") 
                    } 
                }) 
            //return the cursor to default 
            document.body.style.cursor = 'default'; 
        }; 
        input.click(); 
    } 
} 
import { ViewerInitializer } from "../../utilities/ViewerInitializer"; 
import { documentViewer } from "../../utilities/ViewerInitializer"; 
 
 
export class DocumentFormFields { 
    run = () => { 
        new ViewerInitializer(); 
    } 
 
    getData() { 
        var doc = documentViewer.document; 
        documentViewer.prepareToSave(); 
        if (doc.formFields.hasFormFields) { 
            var containers = doc.formFields.getFormFields(); 
            //This will loop all the fields and change the values of the DocumentTextFormFields to 'LEADTOOLS PDF Forms', uncomment the below code to see it in action 
            // for (let i = 0; i < containers.length; i++) { 
            //     for (let j = 0; j < containers[i].children.count; j++) { 
            //         if (containers[i].children.item(j) != null && containers[i].children.item(j).type == "DocumentTextFormField") { 
            //             containers[i].children.item(j).value = "LEADTOOLS PDF Forms"; 
            //         } 
            //     } 
            // } 
            //Loops through on all the pages and fields of each page and outputs the results in the console 
            for (let i = 0; i < containers.length; i++) { 
                for (let j = 0; j < containers[i].children.count; j++) { 
                    console.log(`-------------------------- Page ${i + 1} - Field ${j + 1} ---------------------------------`) 
                    console.log(`ID: ${containers[i].children.item(j).id}`); 
                    console.log(`Name: ${containers[i].children.item(j).name}`); 
                    console.log(`Bounds: ${containers[i].children.item(j).bounds}`); 
                    console.log(`Background color: ${containers[i].children.item(j).backgroundColor}`); 
                    console.log(`Printable: ${containers[i].children.item(j).printable}`); 
                    console.log(`Viewable: ${containers[i].children.item(j).viewable}`); 
                    console.log(`Locked: ${containers[i].children.item(j).locked}`); 
                    console.log(`Required: ${containers[i].children.item(j).required}`); 
                    console.log(`Read Only: ${containers[i].children.item(j).readOnly}`); 
                    console.log(`Border Style: ${containers[i].children.item(j).borderStyle.style}`); 
                    console.log(`Border Color: ${containers[i].children.item(j).borderStyle.color}`); 
                    console.log(`Border Width: ${containers[i].children.item(j).borderStyle.width}`); 
                    console.log(`Font Name: ${containers[i].children.item(j).textStyle.fontName}`); 
                    console.log(`Font Size: ${containers[i].children.item(j).textStyle.fontSize}`); 
                    console.log(`Font Color: ${containers[i].children.item(j).textStyle.color}`); 
                    console.log(`Font Alignment: ${containers[i].children.item(j).textStyle.textAlignment}`); 
                    console.log(`Type: ${containers[i].children.item(j).type}`); 
 
                    if (containers[i].children.item(j).type == "DocumentTextFormField") { 
                        console.log(`Value: ${containers[i].children.item(j).value}`) 
                        console.log(`Content Type: ${containers[i].children.item(j).contentType}`); 
                        console.log(`Max Length: ${containers[i].children.item(j).maxLength}`) 
                        console.log(`Multi-Line: ${containers[i].children.item(j).multiline}`) 
                        console.log(`Password: ${containers[i].children.item(j).isPassword}`) 
                        console.log(`Comb: ${containers[i].children.item(j).isComb}`) 
                    } 
                    if (containers[i].children.item(j).type == "DocumentChoiceFormField") { 
                        console.log(`Options Display Value: ${containers[i].children.item(j).optionsDisplayValue}`) 
                        console.log(`Options Exported Value: ${containers[i].children.item(j).optionsExportedValue}`); 
                        console.log(`Selected Indices: ${containers[i].children.item(j).selectedIndices}`) 
                        console.log(`Multi-Select: ${containers[i].children.item(j).multiSelect}`) 
                        console.log(`Choice Type: ${containers[i].children.item(j).choiceType}`) 
                    } 
                    if (containers[i].children.item(j).type == "DocumentButtonFormField") { 
                        console.log(`Checked: ${containers[i].children.item(j).isChecked}`) 
                        if (containers[i].children.item(j).buttonType == 0) { 
                            console.log(`Button Type: Check Box`); 
                        } else { 
                            console.log(`Button Type: Radio Button`); 
                        } 
                    } 
                } 
            } 
        } 
        else { 
            console.log("This document does not have PDF Form Fields") 
        } 
    } 
} 
export var documentViewer = null; 
export class ViewerInitializer { 
 
    constructor() { 
        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.setLicense(); 
        this.initFactory(); 
        this.createDocumentViewer(); 
    } 
 
    // Set the LEADTOOLS Evaluation license 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                console.log(msg); 
            } 
        }); 
    } 
 
    // Before we call the service, we need to explain where it is ("localhost:40000/api", for example): 
    initFactory = () => { 
        lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
        lt.Document.DocumentFactory.servicePath = ""; 
        lt.Document.DocumentFactory.serviceApiPath = "api"; 
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR, statusText, errorThrown) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    createDocumentViewer = () => { 
        // Create the options object for the DocumentViewer 
        var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
        createOptions.viewCreateOptions.useElements = true; 
        createOptions.thumbnailsCreateOptions.useElements = false; 
        // Set viewContainer to #documentViewer 
        createOptions.viewContainer = document.getElementById("content"); 
        // Create the document viewer 
        documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
        // We prefer SVG viewing over Image viewing for this example 
        documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
        // To use Image: lt.Document.Viewer.DocumentViewerItemType.image; 
        documentViewer.view.imageViewer.autoCreateCanvas = true; 
        this.loadDefaultDoc(documentViewer) 
    } 
 
    loadDefaultDoc = (viewer) => { 
        var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
        var loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
        loadDocumentOptions.loadFormFieldsMode = 1; 
        // Call the "LoadFromUri" and pass success and failure callbacks to the promise 
        lt.Document.DocumentFactory.loadFromUri(url, loadDocumentOptions) 
            .done((document) => { 
                const ready = () => { 
                    documentViewer.setDocument(document); 
                    this.registerClickEvents(); 
                    if (document.formFields.hasFormFields) { 
                        console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information") 
                    } else { 
                        console.log("This document does not have PDF Form Fields") 
                    } 
                } 
 
                if (document.isStructureSupported && !document.structure.isParsed) 
                    document.structure.parse() 
                        .done(ready) 
                        .fail(ViewerInitializer.showServiceError); 
                else 
                    ready(); 
            }) 
            .fail((ViewerInitializer.showServiceError)); 
    } 
    //Initialize the onclick events for our two buttons 
    registerClickEvents = () => { 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) => { 
            this.selectAndLoadFile(); 
        } 
    } 
      
    selectAndLoadFile() { 
        //creates an input element on the Import Document button to upload files  
        //into the document editor  
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            //Set the cursor to an idle animations 
            document.body.style.cursor = 'wait'; 
            //Create the document loading options 
            const loadDocumentOptions = new lt.Document.LoadDocumentOptions(); 
            loadDocumentOptions.loadFormFieldsMode = 1; 
            //load the document from a file using the options 
            lt.Document.DocumentFactory.loadFromFile(file, loadDocumentOptions) 
                .then((doc) => { 
                    //set the new document in the document viewer 
                    documentViewer.setDocument(doc); 
                    //check to see if the document has form fields 
                    if (doc.formFields.hasFormFields) { 
                        console.log("This document has PDF Form Fields. Click the 'Display Field Data in the Console' to see more information") 
                    } 
                    else { 
                        console.log("This document does not have PDF Form Fields") 
                    } 
                }) 
            //return the cursor to default 
            document.body.style.cursor = 'default'; 
        }; 
        input.click(); 
    } 
} 
<!DOCTYPE html> 
<html> 
 
<head> 
    <meta charset="utf-8" /> 
    <title> Image Viewer with Annotations and Burner</title> 
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> 
 
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> 
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></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"> 
 
    <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
    <div> 
        <div id="title"> 
            Showcasing PDF Form Fields in the Console Logs 
        </div> 
        <div id="serviceStatus" class="vcenter push-right"></div> 
        <ul id="menu"> 
            <li><a id="importBtn" class="rightLineBorder">Import Document</a></li> 
            <li><a id="exampleBtn" class="rightLineBorder">Run Example</a></li> 
            <li><a id="getDataBtn" class="rightLineBorder" style="display: none;">Show Data in the Console</a></li> 
        </ul> 
    </div> 
    <div id="imageWrapper"> 
        <div class="inner-body" id="content"> 
        </div> 
    </div> 
</body> 
<script> 
    //creates the onclick functions for the buttons and hides/shows them when necessary 
    window.onload = () => { 
        const button = document.getElementById('exampleBtn'); 
        const example = new window.examples.DocumentFormFields(); 
 
        const getDataBtn = document.getElementById('getDataBtn'); 
 
        button.onclick = () => { 
 
            example.run(); 
            button.style.display = "none"; 
            getDataBtn.style.display = "block"; 
 
        } 
        getDataBtn.onclick = () => { 
            example.getData(); 
        } 
    }; 
</script> 
 
</html> 
html {  
    height: 100%;  
}  
  
body {  
    height: 100%;  
    margin: 0;  
    display: flex;  
    flex-direction: column;  
}  
  
#title {  
    padding: 10px;  
    font-size: 24px;  
}  
  
ul {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
}  
  
#imageWrapper {  
    border-top: 1px solid black;  
    height: 95%;  
}  
  
#content {  
    height: 100%;  
}  
  
li {  
    float: left;  
}  
  
li a {  
    display: block;  
    text-align: center;  
    padding: 14px 16px;  
    text-decoration: none;  
    cursor: pointer;  
    user-select: none;  
    font-weight: bold;  
}  
  
li:first-child {  
    margin-left: 5px;  
}  
 
.rightLineBorder{ 
    border-right: 1px black solid; 
} 
  
li a:hover {  
    background-color: lightblue;  
}  
Requirements

Target Platforms

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

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