Is there an easy way to auto resize a gridItem based on the contents inside?

[lambda-thehelper]

Ex: a gridItem has contents inside that take 300px in height, i wanted the gridItem to resize itself to 300px while the resize feature wouldn't let me resize the gridItem bellow 300px as well.

[sCarita]

I was having the exact same question in a dashboard I built using grid-layout.

[lucabecchetti]

news?

[SamX23]

Yup, this feature would be great

[touchrank-dev]

I've implemented this feature, but it is not perfect. At first, set 'height : auto!height' in css, the browser will resize the griditem to fit the contents, then we get the acutal height using element.offsetHeight, finally recreate style and layout all items again.

In GridLayout:

onMounted(()=>{
      // it's not good, but runnable
      setTimeout(
        () => {
          eventBus.emit('calcClientHeight') // catch this event in GridItem
          setTimeout(() => onWindowResize(), 200)
        },
        300
      );
})

In GridItem:

function calcClientHeight() {
  const size = useElementSize(this$refsItem); // get actual height when css's height is set as 'auto!important'
  const { w, h } = calcWH(size.height.value, size.width.value, true)
  emit('height-updated', props.i, h) // update item's data and the re-create style
  nextTick(() => {
    createStyle();
    if (this$refsItem.value) {
      this$refsItem?.value.classList.remove('autoHeight')
      this$refsItem?.value.classList.add('fixedHeight')
    }
  })
}

CSS:

<style scoped>
.autoHeight {
  height:auto !important;
}

.fixedHeight {
  height: v-bind('styleObj.height') !important;
}
</style>