Autosizing breaks with FCV under certain initial conditions.
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 429
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 18
Description
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.
Reproduction
<!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>
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
5.18.4
Validations
- Follow our Code of Conduct
- Read the Wikis.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/slick.grid.ts at the linked sections around lines 2427-2433 and 2817-2819, then reproduce the issue with the supplied shadow-DOM example using autosizeColsMode: 'FCV'. Trace how the header and content widths cause columns under 100px to be treated as locked. Done means the reproduction expands both columns to the available viewport without changing the behavior of other autosize modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100