Start positioning of widget/item not working.

[C-odes]

Hi! I copy pasted the source code and am playing with it. Tweaking it to my liking and needs. I changed the x and y values to the widgets array values: widgets: Array = [ { x: 2, y: 0, w: 1, h: 2, wSm: 1, hSm: 1, wMd: 1, hMd: 2, wLg: 1, hLg: 1, wXl: 2, hXl: 1, dragAndDrop: true, resizable: true, title: 'Basic form inputs 1' }, { x: 0, y: 3, w: 1, h: 2, wSm: 2, hSm: 1, wMd: 2, hMd: 1, wLg: 3, hLg: 1, wXl: 3, hXl: 1, dragAndDrop: true, resizable: true, title: 'Basic form inputs 2' }, { x: 0, y: 6, w: 2, h: 1, wSm: 1, hSm: 2, wMd: 1, hMd: 2, wLg: 2, hLg: 1, wXl: 3, hXl: 1, dragAndDrop: true, resizable: true, title: 'Basic form inputs 3' }, { x: 3, y: 0, w: 1, h: 2, wSm: 1, hSm: 2, wMd: 1, hMd: 2, wLg: 3, hLg: 1, wXl: 3, hXl: 1, dragAndDrop: true, resizable: true, title: 'Basic form inputs 4' }, { w: 1, h: 2, wSm: 1, hSm: 2, wMd: 1, hMd: 2, wLg: 3, hLg: 1, wXl: 3, hXl: 1, dragAndDrop: true, resizable: true, title: 'Basic form inputs x' } ];

Questions:

1. When I change the X and Y , and refresh the page, the initial placement is not changed at all. all components just line up horizontally one after the other. Why? Is this a bug or am I missing something?

2. I removed all elements except one, thinking maybe its cuz the values Im giving it is overlapping somehow , but that didnt work either. It always starts at x=0 and y=0

3. How come in the source code the last value does not have x or y values set at all? Does it just sit next to the last element by default?

Thanks a lot in advance!

[swiety85]

Do you have responsiveOptions this the Gridster configuration? If yes, then your gridster uses different coords depends on the browser window width - read warning in the following section: https://github.com/swiety85/angular2gridster#example-usage. Gridster resolves items if they are overlapping and updates positions to render item one under another. If the coords are missing in the item, Gridster automatically calculates and sets the positions.

[C-odes]

Do you have responsiveOptions this the Gridster configuration? If yes, then your gridster uses different coords depends on the browser window width - read warning in the following section: https://github.com/swiety85/angular2gridster#example-usage. Gridster resolves items if they are overlapping and updates positions to render item one under another. If the coords are missing in the item, Gridster automatically calculates and sets the positions.

Hey! Thanks for answering @swiety85 !

I have responsiveOptions. But I thought these options are more about the gridster and not the items. So for example, my responsiveOptions are as follows: Actually Im gona copyp aste the entire GRidsterOptions.: gridsterOptions: IGridsterOptions = { // core configuration is default one - for smallest view. It has hidden minWidth: 0. lanes: 1, // amount of lanes (cells) in the grid direction: 'vertical', // floating top - vertical, left - horizontal floating: false, dragAndDrop: true, // enable/disable drag and drop for all items in grid resizable: true, // enable/disable resizing by drag and drop for all items in grid resizeHandles: { s: true, e: true, se: true }, widthHeightRatio: 1, // proportion between item width and height lines: { visible: true, color: '#afafaf', width: 2 }, shrink: true, useCSSTransforms: true, responsiveView: true, // turn on adopting items sizes on window resize and enable responsiveOptions responsiveDebounce: 500, // window resize debounce time responsiveSizes: true, // List of different gridster configurations for different breakpoints. // Each breakpoint is defined by name stored in "breakpoint" property. There is fixed set of breakpoints // available to use with default minWidth assign to each. // - sm: 576 - Small devices // - md: 768 - Medium devices // - lg: 992 - Large devices // - xl: 1200 - Extra large // MinWidth for each breakpoint can be overwritten like it's visible below. // ResponsiveOptions can overwrite default configuration with any option available. responsiveOptions: [ { breakpoint: 'sm', // minWidth: 480, lanes: 3 }, { breakpoint: 'md', minWidth: 768, lanes: 4 }, { breakpoint: 'lg', minWidth: 1250, lanes: 6 }, { breakpoint: 'xl', minWidth: 1800, lanes: 14 } ] }; So I assumed if I say in the widgets list, x:2 y:1 this would work on all sizes; sm, md, lg and xl. It would adjust and implement x:2 y:1 on the adjusted grid.

I did notice that if I set xXl :2 then it works (cuz the screen I am testing on is a bigger display that I noticed uses the xl breakpoint options. (14 lanes) But I thought I could set x:2 and have it adjust to the horizontal lane nr 2 and vertical lane nr 1 (y:1) no matter the size. Instead of having to write x:2 xmd:2 xLg:2 xXl:2