vue-grid-layout icon indicating copy to clipboard operation
vue-grid-layout copied to clipboard

Grid item heigth not the actual amount of pixels as described in the documentation

Open SamGeens opened this issue 2 years ago • 3 comments

Software version (please complete the following information):

  • Browser: chrome, firefox
  • Vue Version: ^3.0.0
  • vue-grid-layout Version: 3.0.0-beta1

Describe the bug The grid item height isn't the actual amount of pixels as discribed in the documentation. According to the documentation the grid item heigth should be:

h
type: Number
required: true
Says what is a initial height of the item.

The value is a number that is multiplied by rowHeight.

To Reproduce Steps to reproduce the behavior:

  1. Go to CodeSandbox Template
  2. Note that the row height is set to 30
  3. Inspect the grid elements and note that the item height isn't correct.

The item heigth is here 72px while the expected heigth is: 30 * 2 = 60 image

The item heigth is here 112px while the expected heigth is: 30 * 3 = 90 image

The item heigth is here 152px while the expected heigth is: 30 * 4 = 120 image

Expected behavior I expect the item height to be the actual calcalution the documentation describes: The value is a number that is multiplied by rowHeight

Additional info I wanted to use the row height to calculate what the heigth of and grid element should be before adding it. Let's say I want to add a grid element for a picture I can calculate what the height of the picture should be depending on the grid width to preserve the aspect ratio. If I do such for example the width of a grid item is 100px and I cant to keep a 2x3 ratio the of the grid height should be 150px. But when I set a row height of 1px and a grid item height of 150 the actual height of the grid element is always a bit of like described in step 3.

SamGeens avatar Sep 20 '23 14:09 SamGeens

hello Has the problem been resolved?

Freeandeasy101 avatar Nov 01 '23 02:11 Freeandeasy101

hello Has the problem been resolved?

LovelyShiba avatar Nov 15 '23 01:11 LovelyShiba

https://github.com/jbaysolutions/vue-grid-layout/issues/596#issuecomment-922170876

ModyQyW avatar Jun 22 '24 02:06 ModyQyW