Full height grid with cellHeight: 'auto' acts strangely

[ferretwithaberet]

Subject of the issue

Wrapping the grid in an element with 100vh or 100% and setting it's cellHeight to 'auto' will ignore the wrapper element's height, hence the cells will be longer than what I wanted.

Your environment

Version Taken from the CDN (Seems to be 1.0.0)
Browser Brave Version 1.3.118 Chromium: 80.0.3987.116 (Official Build) (64-bit)

Steps to reproduce

For some reason I can't replicate it in the jsfiddle environment.
1.Make a grid with 12 rows and 12 columns.
2.Wrap the grid inside another element, and set the wrapper's height to 100vh.
3.In the grid's options add cellHeight: 'auto'.

My code (Django template)
The actual code had some other javascript and style too, but they are not related in any way to the grid, they are related to the content inside of the grid, only modifying the .widget-body element.

{% block header_extra %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.0.0/dist/gridstack.min.css" />
<style>
.dashboard {
    height: 70vh; /* I set this to 70 so it is easier to see if it overflew or not */
}
</style>
{% endblock header_extra %}

{% block content %}
<div class="dashboard">
        <div class="grid-stack" data-gs-column="12" data-gs-max-row="12">
            {% for widget in dashboards.0.widgets %}
            <div class="grid-stack-item" data-gs-x="{{ widget.position_col }}" data-gs-y="{{ widget.position_row }}" data-gs-width="{{ widget.position_width }}" data-gs-height="{{ widget.position_height }}">
                <div class="grid-stack-item-content">
                    <div class="tv-widget" data-refresh="{{ widget.refresh_interval }}" data-source="{{ widget.data_source }}" data-type="{{ widget.type }}" data-options="{{ widget.options }}">
                        {% if widget.title %}<h4>{{ widget.title }}<a href="{% url 'company:dashboard:edit-widget' request.company.id widget.id %}" class="widget-edit">Edit</a></h4>{% endif %}
                        <div class="widget-body"></div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock content %}

{% block footer_extra %}
<script src="https://cdn.jsdelivr.net/npm/gridstack@1.0.0/dist/gridstack.all.js"></script>
<script type="application/javascript">
        const grid = GridStack.init({
            disableOneColumnMode: true,
            cellHeight: 'auto',
            float: true,
            // staticGrid: true
        });
</script>
{% endblock footer_extra %}

Expected behaviour

Grid should size relative to the height of the parent element

Actual behaviour

What I think happens Grid says 'F u c**t' to the parent element and does whatever it wants.
What actually happens Grid ignores parent element's height, overflowing it.

Without cellHeight set to 'auto'

With cellHeight set to 'auto'

[ferretwithaberet]

A fast fix is to do

.grid-stack .grid-stack-placeholder > .placeholder-content,
.grid-stack > .grid-stack-item > .grid-stack-item-content {
    left: 0px;
    right: 0px;
}

and to use verticalMargin: 0 and cellHeight: ${100 / numberOfRows}% in the grid options, and adding the margin inside of the content. Apparently the verticalMargin is not calculated as part of the cellHeight.

[adumesny]

from the doc: cellHeight='auto' - height will be calculated to match cell width (initial square grid).

not the same as taking entire height. there is a % option but doubt it actually works when I looked at the code last...

[ferretwithaberet]

from the doc: cellHeight='auto' - height will be calculated to match cell width (initial square grid).

not the same as taking entire height. there is a % option but doubt it actually works when I looked at the code last...

I said I already fixed it with, my problem was that verticalMargin wasn't accounted in the cell height, which was adding extra height to the grid.

`${100 / numberOfRows}%`

[adumesny]

sorry is your issue that 'auto' isn't totally square (due to missing default 20px margin) which is posted as an issue in the code (might be posted as well), or that cell heights don't fill the entire available space ?

You can't force a number of rows (only a max) and I don['t believe % height works either... either way, please post a simple jsfiddle sample so I can take a look. thanks.