Custom resize handle position

[muuvmuuv]

Subject of the issue

Is there a way to describe another element as a resize handle, like handle? I would like to use our custom icon and move the div-element to be inside my widget component. Currently it overflows my widget footer text.

Your environment

• version of gridstack.js 12.2.2
• macos 15.6
• Brave v1.80.125

Steps to reproduce

...

Expected behavior

...

[adumesny]

CSS is used to define the shape, but the parent element is always.grid-stack-item today (where I insert up to 8 sub elements so it must be a container div). To make the last part customizable would require code change and bunch of testing... Donate if you want to support this feature.

  > .ui-resizable-ne,
  > .ui-resizable-nw,
  > .ui-resizable-se,
  > .ui-resizable-sw {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
  }

[muuvmuuv]

Ok alright, I will work on that and see if I can get it to work with just CSS. I guess I can somewhat import the icons SVG and put it into the inline style tag. Thangs for the classes! I will update the post once done.