Update NE,NW resize handle positioning css

rsalcedo6 · rsalcedo6 · commit a53110501e91 · 2024-11-18T15:47:19.000-06:00
diff --git a/src/gridstack.scss b/src/gridstack.scss
@@ -76,14 +76,14 @@ $animation_speed: .3s !default;
   }
 
   > .ui-resizable-ne {
-    @include vendor(transform, translate(0, 10px) rotate(45deg));
+    @include vendor(transform, rotate(45deg));
   }
   > .ui-resizable-sw {
     @include vendor(transform, rotate(45deg));
   }
 
   > .ui-resizable-nw {
-    @include vendor(transform, translate(0, 10px) rotate(-45deg));
+    @include vendor(transform, rotate(-45deg));
   }
   > .ui-resizable-se {
     @include vendor(transform, rotate(-45deg));
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1615,10 +1615,10 @@ export class GridStack {
       // resize handles offset (to match margin)
       Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top};`);
       Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`, `bottom: ${bottom}`);
-      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}`);
+      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}; top: ${top}`);
       Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`, `right: ${right}`);
       Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-se`, `right: ${right}; bottom: ${bottom}`);
-      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-nw`, `left: ${left}`);
+      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-nw`, `left: ${left}; top: ${top}`);
       Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-w`, `left: ${left}`);
       Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`);
     }

Original file line number	Diff line number	Diff line change
`@@ -76,14 +76,14 @@ $animation_speed: .3s !default;`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`> .ui-resizable-ne {`
`79`		`- @include vendor(transform, translate(0, 10px) rotate(45deg));`
	`79`	`+ @include vendor(transform, rotate(45deg));`
`80`	`80`	`}`
`81`	`81`	`> .ui-resizable-sw {`
`82`	`82`	`@include vendor(transform, rotate(45deg));`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`> .ui-resizable-nw {`
`86`		`- @include vendor(transform, translate(0, 10px) rotate(-45deg));`
	`86`	`+ @include vendor(transform, rotate(-45deg));`
`87`	`87`	`}`
`88`	`88`	`> .ui-resizable-se {`
`89`	`89`	`@include vendor(transform, rotate(-45deg));`