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 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);
};
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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:#F4F8EB;">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;
}
