Custom Printing

SpreadJS provides user options to decide what to print and how to print. This can be useful when you have a large sheet, but only want users to be able to print a specific part of that sheet.

<p>You can set display print line in the sheets, with it users can easily know if the sheet data could be printed on the correct page when printing.</p> <pre><code class="hljs js language-js"> sheet.isPrintLineVisible(<span class="hljs-literal">true</span>); </code></pre> <p>When printing, the following contents are printable.</p> <ul> <li><strong>visible rows/columns in corner/row header/column header/viewport</strong></li> <li><strong>cell text</strong></li> <li><strong>cell style(including background image)</strong></li> <li><strong>span</strong></li> <li><strong>overflow</strong></li> <li><strong>picture</strong></li> <li><strong>water mark</strong></li> </ul> <p>And the following contents are unprintable.</p> <ul> <li><strong>hidden rows/columns</strong></li> <li><strong>floating object</strong></li> <li><strong>comment</strong></li> <li><strong>tabStrip</strong></li> <li><strong>scrollBar</strong></li> <li><strong>group</strong></li> <li><strong>filter button</strong></li> <li><strong>validation button, highlight circle</strong></li> <li><strong>active affect</strong></li> <li><strong>selection</strong></li> <li><strong>freeze line</strong></li> <li><strong>spread's background image</strong></li> </ul> <p><strong>How to print</strong></p> <p>You can print all sheets or a specified sheet with the sheet.<strong>print</strong> method.</p> <pre><code class="hljs js language-js"> spread.print(); <span class="hljs-comment">// print all sheets</span> <span class="hljs-comment">// spread.print(1 /* sheetIndex */); // print the 2nd sheet ( 0 based index )</span> </code></pre> <p>For each sheet, you can insert a page break before the specified row or column with the <strong>setRowPageBreak</strong> or Sheet.<strong>setColumnPageBreak</strong> method.</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// insert a page break before the 6th row</span> sheet.setRowPageBreak(<span class="hljs-number">5</span>, <span class="hljs-literal">true</span>); <span class="hljs-comment">// insert a page break before the 4th column</span> sheet.setColumnPageBreak(<span class="hljs-number">3</span>, <span class="hljs-literal">true</span>); </code></pre> <p>For each sheet, you can set detailed options with the Sheet object.<strong>printInfo</strong> method. Here are some options:</p> <p><strong>Appearance:</strong></p> <p><span class="indent-1">showGridLine</span>: whether to print the grid lines (default is true).</p> <p><span class="indent-1">showBorder</span>: whether to print an outline border around the entire control.</p> <p><span class="indent-1">showColumnHeader / showRowHeader</span>: how to print column / row header, a <strong>PrintVisibilityType</strong> enum value.</p> <ul> <li><strong>inherit: depends on Sheet's setting ((default) visibility of column / row header).</strong></li> <li><strong>hide: do not print.</strong></li> <li><strong>show: shows in each page.</strong></li> <li><strong>showOnce: shows once (display the header on the 1st page only).</strong></li> </ul> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> sheet = spread.sheets[<span class="hljs-number">0</span>]; <span class="hljs-keyword">var</span> printInfo = sheet.printInfo(); printInfo.showGridLine(<span class="hljs-literal">false</span>); printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show); printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show); </code></pre> <p><strong>Print range:</strong></p> <p><span class="indent-1">rowStart</span>: specify the start row index of print range.</p> <p><span class="indent-1">rowEnd</span>: specify the end row index of print range.</p> <p><span class="indent-1">columnStart</span>: specify the start column index of print range.</p> <p><span class="indent-1">columnEnd</span>: specify the end column index of print range.</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// set print range to override auto detected end row / column</span> printInfo.rowEnd(<span class="hljs-number">40</span>); printInfo.columnEnd(<span class="hljs-number">12</span>) </code></pre> <p><strong>Repeat items:</strong></p> <p><span class="indent-1">repeatColumnStart</span>: specify the start column index of a repeated range to print on left of each page.</p> <p><span class="indent-1">repeatColumnEnd</span>: specify the end column index of a repeated range to print on left of each page.</p> <p><span class="indent-1">repeatRowStart</span>: specify the start row index of a repeated range to print on top of each page.</p> <p><span class="indent-1">repeatRowEnd</span>: specify the end row index of a repeated range to print on top of each page.</p> <pre><code class="hljs js language-js"> printInfo.repeatRowStart(<span class="hljs-number">0</span>); printInfo.repeatRowEnd(<span class="hljs-number">1</span>); printInfo.repeatColumnStart(<span class="hljs-number">0</span>) printInfo.repeatColumnEnd(<span class="hljs-number">0</span>) </code></pre> <p><strong>Header & footer:</strong></p> <p><span class="indent-1">headerLeft</span>: the text and format of left section of header area.</p> <p><span class="indent-1">headerCenter</span>: the text and format of center section of header area.</p> <p><span class="indent-1">headerRight</span>: the text and format of right section of header area.</p> <p><span class="indent-1">footerLeft</span>: the text and format of left section of footer area.</p> <p><span class="indent-1">footerCenter</span>: the text and format of center section of footer area.</p> <p><span class="indent-1">footerRight</span>: the text and format of right section of footer area.</p> <p><span class="indent-1">headerLeftImage</span>: the image of left section of header area.</p> <p><span class="indent-1">headerCenterImage</span>: the image of center section of header area.</p> <p><span class="indent-1">headerRightImage</span>: the image of right section of header area.</p> <p><span class="indent-1">footerLeftImage</span>: the image of left section of footer area.</p> <p><span class="indent-1">footerCenterImage</span>: the image of center section of footer area.</p> <p><span class="indent-1">footerRightImage</span>: the image of right section of footer area.</p> <p><span class="indent-1">supported format</span>: the &amp; is used as an escape character, use it along with following keywords to print special data.</p> <ul> <li><strong>P: current page number.</strong></li> <li><strong>N: total page count.</strong></li> <li><strong>D: current date (today).</strong></li> <li><strong>T: current time.</strong></li> <li>**G: image, related url is set with corresponding **<em>Image.</em>*</li> <li><strong>S: strikethrough.</strong></li> <li><strong>U: underline.</strong></li> <li><strong>B: bold.</strong></li> <li><strong>I: italic.</strong></li> <li><strong>": (double quote), used to set font-family.</strong></li> <li><strong>F: spread name.</strong></li> <li><strong>A: sheet name.</strong></li> </ul> <pre><code class="hljs js language-js"> printInfo.headerCenter(<span class="hljs-string">"&amp;\"Comic Sans MS\"System Information"</span>); printInfo.headerLeft(<span class="hljs-string">"&amp;G"</span>); printInfo.headerLeftImage(<span class="hljs-string">"images/GrapeCity_LOGO.jpg"</span>); printInfo.footerCenter(<span class="hljs-string">"&amp;P/&amp;N"</span>); </code></pre> <p><strong>Water mark:</strong></p> <p>User can add watermark when print in spreadJS.</p> <p>User can add multiple watermark for a page, just like this:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> printInfo = activeSheet.printInfo(); <span class="hljs-keyword">var</span> watermark1 = {<span class="hljs-attr">x</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">width</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">height</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">imageSrc</span>:<span class="hljs-string">".image/watermart1.jpg"</span>, <span class="hljs-attr">page</span>:<span class="hljs-string">"all"</span>}; <span class="hljs-keyword">var</span> watermark2 = {<span class="hljs-attr">x</span>:<span class="hljs-number">400</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">400</span>, <span class="hljs-attr">width</span>:<span class="hljs-number">30</span>, <span class="hljs-attr">height</span>:<span class="hljs-number">30</span>, <span class="hljs-attr">imageSrc</span>:<span class="hljs-string">".image/watermart2.jpg"</span>, <span class="hljs-attr">page</span>:<span class="hljs-string">"all"</span>}; printInfo.watermark([watermark1, watermark2]); </code></pre> <p>user can add a watermark for different pages, such as add a watermark only for page 0, 1, 2, 3, 5, 10, just like this:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> printInfo = activeSheet.printInfo(); <span class="hljs-keyword">var</span> watermark1 = {<span class="hljs-attr">x</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">width</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">height</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">imageSrc</span>:<span class="hljs-string">".image/watermart1.jpg"</span>, <span class="hljs-attr">page</span>:<span class="hljs-string">"0,1,2,3,5,10"</span>}; printInfo.watermark([watermark1]); </code></pre> <p>and user can add a watermark only for odd or even page, just need set page to "odd" or "even".</p> <p><strong>BeforPrint event:</strong></p> <p>SpreadJS support an event when before print: GC.Spread.Sheets.Events.BeforePrint.</p> <p>User can do some thing before print through this event, such as:</p> <ul> <li><strong>customer can cancel print.</strong></li> <li><strong>give print content iframe, so user can use some other way to print, such as flash and so on…</strong></li> </ul> <p>Event args:</p> <ul> <li><strong>args.iframe: The DOM element which include all printing content.</strong></li> <li><strong>args.cancel: The option which could cancel the following printing process.</strong> Code see below:</li> </ul> <pre><code class="hljs js language-js">spread.bind(GC.Spread.Sheets.Events.BeforePrint, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e, args</span>) </span>{ args.cancel = <span class="hljs-literal">true</span>; }); </code></pre>
function _getElementById(id) { return document.getElementById(id); } function _getElementByClass(className) { return document.getElementsByClassName(className); } window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); _getElementById('btnSetPrintInfo').addEventListener("click", setPrintInfo); _getElementById('btnPrint').addEventListener("click", function () { spread.print(0); }); _getElementById('waterMarkAdd').addEventListener("click", addWaterMark); _getElementById('waterMarkClear').addEventListener("click", function () { var listDiv = _getElementById('waterMarkList'); listDiv.innerHTML = ""; listDiv.waterMarkList = []; }); _getElementById('displayPrintLine').addEventListener("click", function () { var sheet = spread.getActiveSheet(); sheet.isPrintLineVisible(_getElementById('displayPrintLine').checked); }); var titles = _getElementByClass('title'); for(var i=0; i<titles.length; i++){ titles[i].addEventListener("click", toggleClass); } } function initSpread(spread) { var sd = data; if (sd && sd.sheets) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd); var sheet = spread.sheets[0]; adjustLayoutForPrint(sheet); sheet.options.gridline.showVerticalGridline = false; sheet.options.gridline.showHorizontalGridline = false; initPrintInfo(sheet); spread.resumePaint(); } } function initPrintInfo(sheet) { var printInfo = sheet.printInfo(); // custom printInfo for default output printInfo.showBorder(false); printInfo.showGridLine(false); printInfo.columnStart(1); printInfo.columnEnd(6); printInfo.rowStart(1); printInfo.repeatRowStart(1); printInfo.repeatRowEnd(2); printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide); printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide); printInfo.headerCenter("Olympic Athletes"); printInfo.headerLeft("&G"); printInfo.headerLeftImage("$DEMOROOT$/spread/source/images/olympic.jpg"); printInfo.footerCenter("&P/&N"); // sync with UI setting items _getElementById('rowStart').value = printInfo.rowStart(); _getElementById('rowEnd').value = printInfo.rowEnd(); _getElementById('columnStart').value = printInfo.columnStart(); _getElementById('columnEnd').value = printInfo.columnEnd(); _getElementById('repeatRowStart').value = printInfo.repeatRowStart(); _getElementById('repeatRowEnd').value = printInfo.repeatRowEnd(); _getElementById('repeatColumnStart').value = printInfo.repeatColumnStart(); _getElementById('repeatColumnEnd').value = printInfo.repeatColumnEnd(); _getElementById('showBorder').checked = printInfo.showBorder(); _getElementById('showGridLine').checked = printInfo.showGridLine(); _getElementById('displayPrintLine').checked = sheet.isPrintLineVisible(); _getElementById('showRowHeader').value = printInfo.showRowHeader(); _getElementById('showColumnHeader').value = printInfo.showColumnHeader(); _getElementById('headerLeft').value = printInfo.headerLeft(); _getElementById('headerLeftImage').value = printInfo.headerLeftImage(); _getElementById('headerCenter').value = printInfo.headerCenter(); _getElementById('headerCenterImage').value = printInfo.headerCenterImage(); _getElementById('headerRight').value = printInfo.headerRight(); _getElementById('headerRightImage').value = printInfo.headerRightImage(); _getElementById('footerLeft').value = printInfo.footerLeft(); _getElementById('footerLeftImage').value = printInfo.footerLeftImage(); _getElementById('footerCenter').value = printInfo.footerCenter(); _getElementById('footerCenterImage').value = printInfo.footerCenterImage(); _getElementById('footerRight').value = printInfo.footerRight(); _getElementById('footerRightImage').value = printInfo.footerRightImage(); } function setPrintInfo(){ function setPrintInfoNumberValueItem(printInfo, key, method) { var value = parseInt(_getElementById(key).value), method = method || key; if (!isNaN(value)) { printInfo[method](value); } } var spread = GC.Spread.Sheets.findControl("ss"); var sheet = spread.getActiveSheet(), printInfo = sheet.printInfo(); sheet.suspendPaint(); ["rowStart", "rowEnd", "columnStart", "columnEnd", "repeatRowStart", "repeatRowEnd", "repeatColumnStart", "repeatColumnEnd" ].forEach(function (name) { setPrintInfoNumberValueItem(printInfo, name); }); printInfo.showBorder(_getElementById('showBorder').checked); printInfo.showGridLine(_getElementById('showGridLine').checked); printInfo.showRowHeader(parseInt(_getElementById('showRowHeader').value)); printInfo.showColumnHeader(parseInt(_getElementById('showColumnHeader').value)); printInfo.headerLeft(_getElementById('headerLeft').value); printInfo.headerLeftImage(_getElementById('headerLeftImage').value); printInfo.headerCenter(_getElementById('headerCenter').value); printInfo.headerCenterImage(_getElementById('headerCenterImage').value); printInfo.headerRight(_getElementById('headerRight').value); printInfo.headerRightImage(_getElementById('headerRightImage').value); printInfo.footerLeft(_getElementById('footerLeft').value); printInfo.footerLeftImage(_getElementById('footerLeftImage').value); printInfo.footerCenter(_getElementById('footerCenter').value); printInfo.footerCenterImage(_getElementById('footerCenterImage').value); printInfo.footerRight(_getElementById('footerRight').value); printInfo.footerRightImage(_getElementById('footerRightImage').value); printInfo.watermark(_getElementById('waterMarkList').waterMarkList); sheet.resumePaint(); } function addWaterMark() { var watermark = {}; watermark.x = _getElementById('waterMarkX').value; watermark.y = _getElementById('waterMarkY').value; watermark.width = _getElementById('waterMarkWidth').value; watermark.height = _getElementById('waterMarkHeight').value; watermark.imageSrc = _getElementById('waterMarkImage').value; watermark.page = _getElementById('waterMarkPage').value; var node=document.createElement("option"); node.innerText = JSON.stringify(Object.values(watermark)); var listDiv = _getElementById('waterMarkList'); listDiv.appendChild(node); if (!listDiv.waterMarkList) { listDiv.waterMarkList = []; } listDiv.waterMarkList.push(watermark); } function toggleClass() { var node = this.nextElementSibling; var reg = new RegExp('(\\s|^)hidden(\\s|$)'); if (node.className.match(reg)) { node.className = node.className.replace(reg, ''); } else { node.className += " hidden"; } } function adjustLayoutForPrint(sheet) { sheet.addColumns(0, 2); sheet.setColumnWidth(0, 30); sheet.setColumnWidth(1, 30); for (var r = 5; r <= 200; r += 5) { sheet.getCell(r, 1).text(r + "").font("normal 9px Arial"); } sheet.addRows(0, 2); sheet.setRowHeight(0, 10); sheet.setRowHeight(1, 10); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/customPrint.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="container"> <div class="row"> <span>Change these options and scroll down to click the "Set PrintInfo" button to set these options in the PrintInfo for the Spread component. Click the "Print" button to see how these settings affect how the workbook is printed.</span> <hr style="border: 1px solid white;border-bottom-color: lightgray;" /> <div class="group"> <label> <input type="checkbox" id="displayPrintLine"> PrintLineVisible </label> </div> </div> <div class="row title"> <span>Print Region</span> </div> <div class="row hidden"> <div class="group"> <label>RowStart:</label> <input id="rowStart"> </div> <div class="group"> <label>RowEnd:</label> <input id="rowEnd"> </div> <div class="group"> <label>ColumnStart:</label> <input id="columnStart"> </div> <div class="group"> <label>ColumnEnd:</label> <input id="columnEnd"> </div> </div> <div class="row title"> <span>Repeat</span> </div> <div class="row hidden"> <div class="group"> <label>RepeatRowStart:</label> <input id="repeatRowStart"> </div> <div class="group"> <label>RepeatRowEnd:</label> <input id="repeatRowEnd"> </div> <div class="group"> <label>RepeatColumnStart:</label> <input id="repeatColumnStart"> </div> <div class="group"> <label>RepeatColumnEnd:</label> <input id="repeatColumnEnd"> </div> </div> <div class="row title"> <span>Print Options</span> </div> <div class="row hidden"> <div class="group"> <label> <input type="checkbox" id="showBorder"> ShowBorder </label> </div> <div class="group"> <label> <input type="checkbox" id="showGridLine"> ShowGridLine </label> </div> <div class="group"> <label>ShowRowHeader:</label> <select id="showRowHeader"> <option value="0">Inherit</option> <option value="1">Hide</option> <option value="2">Show</option> <option value="3">ShowOnce</option> </select> </div> <div class="group"> <label>ShowColumnHeader:</label> <select id="showColumnHeader"> <option value="0">Inherit</option> <option value="1">Hide</option> <option value="2">Show</option> <option value="3">ShowOnce</option> </select> </div> </div> <div class="row title"> <span>Header</span> </div> <div class="row hidden"> <div class="group"> <label>HeaderLeft:</label> <input id="headerLeft"> </div> <div class="group"> <label>HeaderLeftImage:</label> <select id="headerLeftImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> <div class="group"> <label>HeaderCenter:</label> <input id="headerCenter"> </div> <div class="group"> <label>HeaderCenterImage:</label> <select id="headerCenterImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> <div class="group"> <label>HeaderRight:</label> <input type="text" id="headerRight"> </div> <div class="group"> <label>HeaderRightImage:</label> <select id="headerRightImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row title"> <span>Footer</span> </div> <div class="row hidden"> <div class="group"> <label>FooterLeft:</label> <input id="footerLeft"> </div> <div class="group"> <label>FooterLeftImage:</label> <select id="footerLeftImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> <div class="group"> <label>FooterCenter:</label> <input id="footerCenter"> </div> <div class="group"> <label>FooterCenterImage:</label> <select id="footerCenterImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> <div class="group"> <label>FooterRight:</label> <input type="text" id="footerRight"> </div> <div class="group"> <label>FooterRightImage:</label> <select id="footerRightImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> </div> <div class="row title"> <span>Water Mark</span> </div> <div class="row hidden"> <div class="group"> <label>X:</label> <input type="number" id="waterMarkX"> </div> <div class="group"> <label>Y:</label> <input type="number" id="waterMarkY"> </div> <div class="group"> <label>Width:</label> <input type="number" id="waterMarkWidth"> </div> <div class="group"> <label>Height:</label> <input type="number" id="waterMarkHeight"> </div> <div class="group"> <label>WaterMarkImage:</label> <select id="waterMarkImage"> <option value="$DEMOROOT$/spread/source/images/apple.jpg">Apple</option> <option value="$DEMOROOT$/spread/source/images/olympic.jpg" selected>Olympic</option> </select> </div> <div class="group"> <label>Page:</label> <input type="text" id="waterMarkPage" list="list"> <datalist id="list"> <option value="all"></option> <option value="odd"></option> <option value="even"></option> </datalist> </div> <div class="group"> <button type="button" id="waterMarkAdd" class="waterMark-btn"> Add </button> <button type="button" id="waterMarkClear" class="waterMark-btn"> Clear </button> </div> <div class="group"> <label>WaterMarkList:</label> <select id="waterMarkList" class="custom-list-pane" size="4"></select> </div> </div> <div> <input type="button" id="btnSetPrintInfo" value="Set PrintInfo"> </div> <hr style="border: 1px solid white;border-bottom-color: lightgray;" /> <div> <input type="button" style="margin-bottom: 6px" value="Print" id="btnPrint"> </div> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow-y: scroll; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .container { width: 100%; height: calc(100% - 40px); box-sizing: border-box; } .row { border: #e7e7e7 1px solid; padding: 3px 7px; } .hidden { display: none; } .title { margin-top: 10px; font-weight: bold; cursor: pointer; color: #3c79ff; background: #f7a7115e; padding-left: 10px; } .group { padding-bottom: 8px; } .waterMark-btn { width:30%; } label { display: inline-block; min-width: 130px; } input, select { margin-top: 6px; padding: 4px 6px; width: 100%; display: block; box-sizing: border-box; } input[type=checkbox] { width: auto; display: inline-block; } hr { border: 1px solid white; border-bottom-color: lightgray; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }