diff --git a/projects/angular-gridster2/src/lib/gridsterRenderer.ts b/projects/angular-gridster2/src/lib/gridsterRenderer.ts index bfcd246d..e38e9fee 100644 --- a/projects/angular-gridster2/src/lib/gridsterRenderer.ts +++ b/projects/angular-gridster2/src/lib/gridsterRenderer.ts @@ -153,11 +153,13 @@ export class GridsterRenderer { } getGridRowStyle(i: number): CommonGridStyle { - const margin = this.gridster.$options().margin; + const $options = this.gridster.$options(); + const margin = $options.margin; + const trailingMargin = $options.outerMargin ? margin : -margin; // generates the new style const newPos: GridRowCachedStyle = { top: this.gridster.curRowHeight * i, - width: this.gridster.gridColumns.length * this.gridster.curColWidth + margin, + width: this.gridster.gridColumns.length * this.gridster.curColWidth + trailingMargin, height: this.gridster.curRowHeight - margin, style: {} }; diff --git a/projects/angular-gridster2/src/lib/tests/gridsterRenderer.spec.ts b/projects/angular-gridster2/src/lib/tests/gridsterRenderer.spec.ts new file mode 100644 index 00000000..54dd3b3e --- /dev/null +++ b/projects/angular-gridster2/src/lib/tests/gridsterRenderer.spec.ts @@ -0,0 +1,21 @@ +import { signal } from '@angular/core'; + +import { GridsterRenderer } from '../gridsterRenderer'; + +describe('gridsterRenderer service', () => { + it('keeps display grid rows inside the usable width without outer margin', () => { + const gridster: any = { + $options: signal({ + margin: 20, + outerMargin: false, + useTransformPositioning: true + }), + gridColumns: new Array(24), + curColWidth: 25, + curRowHeight: 61 + }; + const renderer = new GridsterRenderer(gridster); + + expect(renderer.getGridRowStyle(0).width).toBe('580px'); + }); +});