Dynamic sizing, or proportional sizing, is used to make sure that columns and rows completely fill the viewport. When the viewport size is changed or the user adds/deletes/resizes any column or row, the columns/rows that have star sizing applied to them will automatically resize to fill the viewport.
This type of sizing can be used in conjunction with numbers to define a weighted proportion. For example, a column with a star size of "3" would fill 3 times that of a standard "" sized column in the viewport.
Use the setRowHeight and setColumnWidth methods to set the dynamic size.
Use the getRowHeight and getColumnWidth methods can get the actual size and the setting value.
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
var sd = dataSource;
var sheet = spread.getActiveSheet();
if (sd.length > 0) {
sheet.setDataSource(sd);
}
sheet.setColumnWidth(0, "2*");
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, "*");
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(6, 110);
}
<!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/data/data.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">
<div class="option-row">
<p>The column "Film" and "Lead Studio" has been set to dynamic size. <br />Change the browser size or resize the column or hide the column to see how the dynamic size works.</p>
</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: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
