Widgets with makeWidget does not respect grid margin

[muuvmuuv]

Subject of the issue

Adding existing html items inside grid wont add the defined margin that is defined in the grid options on init.

Your environment

• version of gridstack.js 12.2
• which browser/OS Brave

Steps to reproduce

https://jsfiddle.net/26myha3q/

Expected behavior

...

[adumesny]

it does make margin:10, please debug your code more next time... you're problem is with your CSS. you are making your entire widget .grid-stack div instead of content green. drag item and you can see.

.grid-stack div,
.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

also this is NOT a proper structure to call makeWidget() on. you are missing grid-stack-item-content

<div class="grid-stack">
  <div>A</div>
  <div>B</div>
</div>

don't forget to donate if you find this lib useful as it takes a lot of time to support this!

[muuvmuuv]

I am sorry but I don't understand, I want to make the div a widget, I updated it and made an inner div, still does not add the margin to the element, just the placeholder.

The repl is just a simplification of what I try with Angular at the moment, but technically it should be the same. We have a div "dashboard" that holds our widgets and I call these using "makeWidget". So I would have thought that on calling "makeWidget" it respects my widget's padding/margin already?

[muuvmuuv]

Ohh... I now understand

[adumesny]

read the doc ! for correct structure https://github.com/gridstack/gridstack.js/blob/master/README.md#basic-usage

// ...in your HTML
<div class="grid-stack">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">Item 1</div>
  </div>
  <div class="grid-stack-item" gs-w="2">
    <div class="grid-stack-item-content">Item 2 wider</div>
  </div>
</div>

BUT I woudl not use DOM init with Angular. Read the angular doc instead! it's all out there and running examples, before asking here.

[muuvmuuv]

Yeah sry, overread the „in your html“ part. I tried the Angular lib but it does not work properly with zoneless signal only environments. My impl works now for my case.