BTMorton / angular2-grid

A drag/drop/resize grid-based plugin directive for angular2
https://bmorton.co.uk/angular/
MIT License
354 stars 159 forks source link

Possible bug with the latest version #289

Closed sconix closed 6 years ago

sconix commented 6 years ago

With the previous version 2.1.0 our dashboard "card" selection view was working perfectly, but now with the latest version it does not. So has there been changes to the functionality or is this a bug?

This is the view with 2.1.0: screenshot 2018-06-16 at 15 37 33

And this is the view with the 2.2.3: screenshot 2018-06-16 at 15 45 13

As you can see the second card is pushed outside of the grid area.

The grid settings for the cards are:

Create survey card: sizex: 2, sizey: 2, minCols: 2, maxRows: 2 List surveys card: sizex: 6, sizey: 2, minCols: 2, maxRows: 2

And the grid settings are: draggable: false, resizeable: false, cascade: up, margins: [12], min_cols: 2, min_rows: 2, col_width: 162, row_height: 138, auto_resize: false, limit_to_screen: true, center_to_screen: true

The size of the view is so that there is room for 6 cols. I could of course "fix" this by setting row: 3 to the second card, but the idea is that when there are more cards we would like to let the grid to arrange them according to the space there is and not to hard code the positions.

Also will there be a release with rxjs 6 soon? This is the only library in our Angular 6 project that requires the rxjs-compat package.

bruiztorres commented 6 years ago

I'm facing a similar issue.

BTMorton commented 6 years ago

Fix should be available in v2.2.4

sconix commented 6 years ago

I believe that there is still one small bug left, not sure if it is related to this or not.

If I have a grid item with sizex: 6 and the grid width is large enough so that it fits it shows correct. And even if I resize the view to smaller the grid item gets resized correctly, but if I reload the view the item expands outside of the grid. So on load the max size of the grid does not seem to limit the size of the items. I even tried with max col size and the results were the same, i.e. on load the max col size did not seemed to effect on a item that had larger sizex set. The configuration is the same as in the issue description.

I can provide better explanation / setup later this week if needed.

BTMorton commented 6 years ago

I think an example would be useful. I don't remember putting any changes that shrink items overriding user configuration, but I'll double check it.

sconix commented 6 years ago

Ok thanks. Basically the setup I have is exactly the same than in the original issue description. Two grid items on their own row and the larger with sizex 6. With 1200px width the larger item takes the whole width as it should and if I resize the view to be smaller it changes the size correctly to a smaller one. But when I reload when the view is less than 1200px wide the card overflows the grid until I resize the window to be again 1200px and go narrower from there.

I try to look into this more tomorrow so I could even try to make an simple example.

BTMorton commented 6 years ago

Ah, ok. I think I see what you mean. I forgot I'd put that in there. I'll take a look at it later.

sconix commented 6 years ago

I still haven't had time to look into the grid code to see why this happens, but I now made a simpe stackblitz demo about the issue so hopefully it helps tracking this issue.

https://stackblitz.com/edit/angular-cybbr6

To reproduce the problem just open the app url in window that is < 1200px wide. If you start with > 1200px wide view and resize the view to smaller the grid items resize as they should, but when view is reloaded the cards overflow the grid area.