update container height on margin change

Author: gmsa

src/App.vue

@@ -33,8 +33,10 @@
             <input type="checkbox" v-model="preventCollision"/> Prevent Collision
             <div style="margin-top: 10px;margin-bottom: 10px;">
                 Row Height: <input type="number" v-model="rowHeight"/> Col nums: <input type="number" v-model="colNum"/>
+                Margin x: <input type="number" v-model="marginX"/> Margin y: <input type="number" v-model="marginY"/>
             </div>
             <grid-layout
+                :margin="[parseInt(marginX), parseInt(marginY)]"
                     :layout.sync="layout"
                     :col-num="parseInt(colNum)"
                     :row-height="rowHeight"
@@ -150,7 +152,9 @@
                 preventCollision: false,
                 rowHeight: 30,
                 colNum: 12,
-                index: 0
+                index: 0,
+                marginX: 10,
+                marginY: 10,
             }
         },
         mounted: function () {

src/components/GridLayout.vue

@@ -247,6 +247,9 @@
             maxRows: function() {
                 this.eventBus.$emit("setMaxRows", this.maxRows);
             },
+            margin() {
+                this.updateHeight();
+            }
         },
         methods: {
             layoutUpdate() {
@@ -292,7 +295,10 @@
             },
             containerHeight: function () {
                 if (!this.autoSize) return;
-                return bottom(this.layout) * (this.rowHeight + this.margin[1]) + this.margin[1] + 'px';
+                // console.log("bottom: " + bottom(this.layout))
+                // console.log("rowHeight + margins: " + (this.rowHeight + this.margin[1]) + this.margin[1])
+                const containerHeight =  bottom(this.layout) * (this.rowHeight + this.margin[1]) + this.margin[1] + 'px';
+                return containerHeight;
             },
             dragEvent: function (eventName, id, x, y, h, w) {
                 //console.log(eventName + " id=" + id + ", x=" + x + ", y=" + y);