Can I set a fixed container height?

[frontHu]

Can I set a fixed container height?

If fixed container height is set, how should row-height and max-row be set

[thibaut-lo]

Hi, I am also interested in this question. While #105 raises the same issue, the answer does not fullfill my expectations.

Let me clarify myself: While I can set an initial fixed height (and width) using that was mentionned in #105, If the grid is filled in vertical space If I resize an item, expanding it vertically, it will push the items below it beyond the set container height, expanding the container beyond its initial height that was set as #105 mentions. I am looking for a way to forbid such grid container extension. Is that possible?

[ReseTTim]

set the property max-rows to the max amount rows you want and in the next css. That helped me :)

.vue-grid-layout { min-height: 100%; }

[stravi]

I found a solution to fix the grid-layout height depending on available space. For that I have used folowing props: max-rows, row-height, margins, autoSize=false And ResizeObserver which will adjust grid-layout row-height according to available height after window resize.

<template>
  <div class="flex-grow-1 w-100">
    <grid-layout
      :layout="layout"
      :col-num="colCount"
      :maxRows="rowCount"
      :row-height="rowHeight"
      :autoSize="false"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :preventCollision="true"
      :vertical-compact="false"
      :margin="margin"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        class="bg-primary"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <span class="remove" @click="removeItem(item.i)">x</span>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core';

interface GridItem {
  x: number;
  y: number;
  w: number;
  h: number;
  i: string;
}

interface State {
  layout: GridItem[];
  index: number;
  colCount: number;
  rowCount: number;
  rowHeight: number;
  observer: null | ResizeObserver;
  margin: number[];
}

export default defineComponent({
  name: 'VideoWall',
  data(): State {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '0' },
        { x: 2, y: 0, w: 2, h: 4, i: '1' },
        { x: 4, y: 0, w: 2, h: 5, i: '2' },
        { x: 6, y: 0, w: 2, h: 3, i: '3' },
        { x: 8, y: 0, w: 2, h: 3, i: '4' },
      ],
      index: 0,
      colCount: 36,
      rowCount: 36,
      rowHeight: 40,
      margin: [5, 5],
      observer: null,
    };
  },
  mounted() {
    this.observer = new ResizeObserver(this.onResize);

    if (this.$el instanceof Element) {
      this.observer.observe(this.$el);
    } else {
      console.log('VideoWall: Failed to bind observer');
    }
  },
  unmounted() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    onResize(entries: ResizeObserverEntry[]): void {
      this.rowHeight =
        Math.floor(entries[0].contentRect.height / this.rowCount) -
        this.margin[1];
    },
  },
});
</script>

[caiosimonbreda]

Hi @stravi, I tried a similar solution and it works to an extent – It disallows resizing an item beyond the established height, but I can still stack items and create a column that extends well beyond the bottom of the container. Turning off preventCollision "fixes" this at the expense of UX – do you recall if this also happened in your case?

[stravi]

Hello @caiosimonbreda, at that time the solution I gave in my previous comment was working well. It has been 2 years since my comment so I admit that there might be some changes in some dependencies that can cause the issue you are describing.