I am trying to display groups of tiles (or in GridStack.js terminology, a list of grid stacks), where tiles have one of few predetermined sizes.
My project should be displaying 3 tiles/”grid items” (one green (large) and one magenta/red
(wide) in the left group (one below the other), and one another blue (small) in the right group). More specifically, something like:
But in my project it displays that instead (resulting into almost not visible tiles):
In the example below, it displays nothing (but I’ve inspected it to see and the grid stack items are there).
Worth noting I use position: relative in the grid stacks (.TileGroup.grid-stack). If I remove that property, the tiles (or grid stack items) display very large. I am also doing width: 100%; height: 100%; inside the grid stack item contents.
Here is some code:
I am assuming cell height determines the width and height of the smallest tiles/”grid items” in the grids.
const gridstack = GridStack.init({
alwaysShowResizeHandle: false,
disableResize: false,
margin: `${margin}rem`,
maxRow: options.direction == "horizontal" ? 6 : undefined,
rtl: localeDir == "rtl",
cellHeight: `${small_size.height}rem`,
acceptWidgets(el) {
return div_ref.current!.contains(el);
},
}, group_element);
// Add gridstack widget
const widget_element = gridstack.addWidget({
x: tile.x,
y: tile.y,
w: get_tile_columns(tile.size),
h: get_tile_rows(tile.size),
});
Here, get_tile_columns() returns a value from 1-4
/**
* Gets width of tile size in small tiles unit.
*/
function get_tile_columns(size: TileSize): number
{
return size == "large" ? 4 : size == "wide" ? 4 : size == "medium" ? 2 : 1;
}
/**
* Gets height of tile size in small tiles unit.
*/
function get_tile_rows(size: TileSize): number
{
return size == "large" ? 4 : size == "wide" ? 2 : size == "medium" ? 2 : 1;
}
Note: I apologize, but I could not provide a Stack Snippet because GridStack uses ES2015 module
exportin the CDN and I get an error indicating thatGridStackis not defined therefore.
