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
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<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>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
function initSpread (spread) {
let sheet = spread.getSheet(0);
sheet.setColumnWidth(0, 20);
let content1 = document.createElement("div");
content1.style.backgroundColor = "gray";
content1.style.width = "100%";
content1.style.height = "100%";
content1.innerHTML = "Floating objects at fixed position.";
let customFloatingObject1 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject1", 20, 20, 240, 20);
customFloatingObject1.content(content1);
customFloatingObject1.fixedPosition(true);
sheet.floatingObjects.add(customFloatingObject1);
let content2 = document.createElement("div");
content2.style.backgroundColor = "lightgray";
content2.style.width = "100%";
content2.style.height = "100%";
content2.innerHTML = "Normal floating objects.";
let customFloatingObject2 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("customFloatingObject2", 20, 280, 240, 20);
customFloatingObject2.content(content2);
sheet.floatingObjects.add(customFloatingObject2);
}
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
