Fixed Position

When the fixedPosition property of a floating object (a Picture or a FloatingObject) is set to true, the floating object's position will not be changed after scrolling, hiding or showing, resizing, or moving rows or columns.

Fixed Position You can use the fixedPosition method to set whether to show the floating object in a fixed position. When fixedPosition is true, dynamicMove and dynamicSize are ignored. When fixedPosition is true, the floating object can be moved or resized. When fixedPosition is true, the following properties work as before. position height width startRow startRowOffset startColumn startColumnOffset endRow endRowOffset endColumn endColumnOffset
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.setColumnWidth(0, 20); var content1 = document.createElement("div"); content1.style.backgroundColor = "gray"; content1.style.width = "100%"; content1.style.height = "100%"; content1.innerHTML = "Floating objects at fixed position."; var customFloatingObject1 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject1", 20, 20, 240, 20); customFloatingObject1.content(content1); customFloatingObject1.fixedPosition(true); sheet.floatingObjects.add(customFloatingObject1); var picture1 = sheet.pictures.add("picture1", "$DEMOROOT$/spread/source/images/apple.jpg", 50, 50, 100, 100); picture1.fixedPosition(true); var content2 = document.createElement("div"); content2.style.backgroundColor = "lightgray"; content2.style.width = "100%"; content2.style.height = "100%"; content2.innerHTML = "Normal floating objects."; var customFloatingObject2 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject2", 20, 280, 240, 20); customFloatingObject2.content(content2); sheet.floatingObjects.add(customFloatingObject2); var picture2 = sheet.pictures.add("picture2", "$DEMOROOT$/spread/source/images/olympic.jpg", 50, 320, 100, 100); picture2.backColor("black"); };
<!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$/spread/source/js/license.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"> <p style=" padding:2px 10px;background-color:lavender;">Try resizing column A in the Spread component to see that the fixed floating objects do not move</p> </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: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }