<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<title>SlickGrid example 1a: Basic grid inside a shadow DOM</title>
<link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
</head>
<body>
<h2 class="title">Example 1 - Shadow DOM</h2>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="host"></div>
</td>
</tr>
</table>
<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
<script src="sortable-cdn-fallback.js"></script>
<script src="../dist/browser/slick.core.js"></script>
<script src="../dist/browser/slick.interactions.js"></script>
<script src="../dist/browser/slick.grid.js"></script>
<script>
var grid;
var columns = [
{id: "title", name: "Col<100px", field: "title", width: 300},
{id: "duration", name: "Col<100px", field: "duration", width: 300},
//{id: "%", name: "% Complete", field: "percentComplete", width: 150 },
//{id: "start", name: "Start", field: "start", width: 150},
//{id: "finish", name: "Finish", field: "finish", width: 150},
//{id: "effort-driven", name: "Effort Driven", field: "effortDriven", width: 150 }
];
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "A" + i,
duration: "B" + i,
//percentComplete: Math.round(Math.random() * 100),
//start: "01/01/2009",
//finish: "01/05/2009",
//effortDriven: (i % 5 == 0)
};
}
/**
* Build the shadow DOM. In this example, it will
* have just a div for the grid, and a <link>
* for the Alpine style.
*
* Notice that the <link> tag must be placed inside
* the shadow DOM tree, it cannot be placed on the <head>
* tag because the shadow DOM is unaffected by external
* styles
*/
var host = document.querySelector("#host");
var shadow = host.attachShadow({ mode: "open" });
var gridContainer = document.createElement("div");
gridContainer.style.width = "1200px";
gridContainer.style.height = "500px";
gridContainer.classList.add("slick-container");
shadow.appendChild(gridContainer);
var linkElement = document.createElement("link");
linkElement.type = "text/css";
linkElement.rel = "stylesheet";
linkElement.href = "../dist/styles/css/slick-alpine-theme.css";
shadow.appendChild(linkElement);
/**
* Since the grid is inside a shadow DOM tree, we have
* to pass the root of this tree to the option `shadowRoot`
*/
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
shadowRoot: shadow,
autosizeColsMode: 'FCV'
};
/**
* Since the <link> tag was loaded dynamically, it will take
* some time to download the referenced css file. We must
* wait for the style to finish loading, otherwise Slick.Grid
* will break
*/
linkElement.addEventListener("load", () => {
grid = new Slick.Grid(gridContainer, data, columns, options);
grid.autosizeColumns();
})
</script>
</body>
</html>
Columns should expand as in all other cases with different initial header/content widths. In case of FCV mode (fit columns to viewport) columns should never be treated as locked as they need to be able shrink or expand.
Describe the bug
When using
autosizeColsMode: 'FCV'columns can be treated as locked which disables the expansion to the available viewport.This happens when column header is larger than its content and overall column width is below 100px.
SlickGrid/src/slick.grid.ts
Lines 2427 to 2433 in 8e36af8
SlickGrid/src/slick.grid.ts
Lines 2817 to 2819 in 8e36af8
Reproduction
Expectation
Columns should expand as in all other cases with different initial header/content widths. In case of FCV mode (fit columns to viewport) columns should never be treated as locked as they need to be able shrink or expand.
Which Framework are you using?
Vanilla / Plain JS
Environment Info
Validations