Open lukaskoeller opened 9 years ago
Nothing yet on this? I haven't been able to figure out a CSS workaround.
I'm facing the same problem.. most of the times the the height of container collapses, when we reload or try to inspect, the height becomes normal, could there be a solution for this issue?
I also experienced this
Hi, All!
The work around is rewriting then "render" method
render = function()
{
self.style.position = 'relative';
var items = self.querySelectorAll(options.srcNode),
transition = (options.transition || 'all 0.5s ease') + ', height 0, width 0',
width = self.clientWidth,
item_margin = parseInt(options.margin || 0),
item_width = parseInt(options.max_width || options.width || 220),
column_count = Math.max(Math.floor(width/(item_width + item_margin)),1),
left = column_count == 1 ? item_margin/2 : (width % (item_width + item_margin)) / 2,
columns = [];
var parent_height = "0";
if (options.max_width)
{
column_count = Math.ceil(width/(item_width + item_margin));
item_width = (width - column_count * item_margin - item_margin)/column_count;
left = item_margin/2;
}
for (var i = 0; i < column_count; i++)
{
columns.push(0);
}
for (var i= 0, length = items.length; i < length; i++)
{
var idx = indexOfSmallest(columns);
items[i].setAttribute('style', 'width: ' + item_width + 'px; ' +
'position: absolute; ' +
'margin: ' + item_margin/2 + 'px; ' +
'top: ' + (columns[idx] + item_margin/2) +'px; ' +
'left: ' + ((item_width + item_margin) * idx + left) + 'px; ' +
'transition: ' + transition);
columns[idx] += items[i].clientHeight + item_margin;
var child_max = items[i].offsetTop + items[i].clientHeight;
if(child_max>parent_height) {
parent_height = child_max;
}
}
parent_height += item_margin;
self.style.height = parent_height + 'px';
};
https://github.com/hongkhanh/gridify/issues/6#issue-64932823
In every case (also the given example in 'javascript/example') the height of the container collapse. Would be very nice if this could be fixed!