{"action":"created","issue":{"url":"https://api.github.com/repos/troolee/gridstack.js/issues/405","repository_url":"https://api.github.com/repos/troolee/gridstack.js","labels_url":"https://api.github.com/repos/troolee/gridstack.js/issues/405/labels{/name}","comments_url":"https://api.github.com/repos/troolee/gridstack.js/issues/405/comments","events_url":"https://api.github.com/repos/troolee/gridstack.js/issues/405/events","html_url":"https://github.com/troolee/gridstack.js/issues/405","id":143954000,"number":405,"title":"Something is wrong with cellHeight","user":{"login":"parthbhagat","id":1017264,"avatar_url":"https://avatars.githubusercontent.com/u/1017264?v=3","gravatar_id":"","url":"https://api.github.com/users/parthbhagat","html_url":"https://github.com/parthbhagat","followers_url":"https://api.github.com/users/parthbhagat/followers","following_url":"https://api.github.com/users/parthbhagat/following{/other_user}","gists_url":"https://api.github.com/users/parthbhagat/gists{/gist_id}","starred_url":"https://api.github.com/users/parthbhagat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/parthbhagat/subscriptions","organizations_url":"https://api.github.com/users/parthbhagat/orgs","repos_url":"https://api.github.com/users/parthbhagat/repos","events_url":"https://api.github.com/users/parthbhagat/events{/privacy}","received_events_url":"https://api.github.com/users/parthbhagat/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/troolee/gridstack.js/labels/type:bug","name":"type:bug","color":"5319e7"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-03-28T11:23:29Z","updated_at":"2016-08-02T12:24:59Z","closed_at":null,"body":"Hello @troolee ,\r\n\r\nI am using gridstack v0.2.5 with jQuery v1.11.1, jQuery UI v1.10.4 and bootstrap v3.2.0.\r\n\r\nI am exploring gridstack to display resizeable and drag-drop enabled dashboard widgets.\r\n\r\nHere something strange I've observed. Please find code snippet below.\r\n\r\n\r\n> < style type=\"text/css\">\r\n> \t.grid-stack {\r\n> \t\tbackground: #f5f5f5;\r\n> \t\twidth: 80%;\r\n> \t}\r\n> \t.grid-stack-item-content {\r\n> \t\tcolor: #2c3e50;\r\n> \t\ttext-align: center;\r\n> \t\tbackground-color: #18bc9c;\r\n> \t}\r\n> </ style>\r\n> < script>\r\n> $(function () {\r\n> \tvar options = {\r\n> \t\tcellHeight: 1,\r\n> \t\tverticalMargin: 1,\r\n> \t\twidth: 3,\r\n> \t\tauto: false,\r\n> \t\thandleClass: 'widget-title',\r\n> \t\tresizable: {\r\n> \t\t\thandles: \"e, s\",\r\n> \t\t\tgrid: [330, 50],\r\n> \t\t\thelper: \"resize-helper\"\r\n> \t\t}\r\n> \t};\r\n> \t$('.grid-stack').gridstack(options);\r\n> \tvar grid = $('.grid-stack').data('gridstack');\r\n> \r\n> \tvar template = '< div class=\"widget-component\" id=\"widg\">< div class=\"grid-stack-item-content\">< div class=\"widget-title\" style=\"background-color: blue; color: white; height: 40px;\">' + 3 + '</div><div>< h1>This is content</h1></div></div></div>';\r\n> \r\n> \tgrid.addWidget($(template), 0, 0, 1, 200, false);\r\n> \tgrid.addWidget($(template), 0, 1, 1, 1, false);\r\n> \tgrid.addWidget($(template), 0, 2, 1, 1, true);\r\n> });\r\n> </ script>\r\n\r\nWhen I run above code then first widget (widget with height = 200), having actual height of 399 pixel. Here is the derived height from chrome: \r\n`.grid-stack-instance-5517 .grid-stack-item[data-gs-height=\"200\"] {\r\n    height: 399px;\r\n}`\r\n\r\nIf we consider cellHeight and verticalMargine, height of widget should be 200 pixel. But it looks like something is going wrong. Probably, it is considering verticalMargin as well, that is why it is doubled to what cellHeight is.\r\n\r\nIf I set cellHeight = 1 and verticalMargin = 10, then height of the widget derived is:\r\n`.grid-stack-instance-9343 .grid-stack-item[data-gs-height=\"200\"] {\r\n    height: 2190px;\r\n}`\r\n\r\nLet me know if my understanding is wrong at some point/s.\r\n\r\nHere is jsFiddle [link](https://jsfiddle.net/hgf3zvbh/)."},"comment":{"url":"https://api.github.com/repos/troolee/gridstack.js/issues/comments/236888270","html_url":"https://github.com/troolee/gridstack.js/issues/405#issuecomment-236888270","issue_url":"https://api.github.com/repos/troolee/gridstack.js/issues/405","id":236888270,"user":{"login":"armensg","id":6030955,"avatar_url":"https://avatars.githubusercontent.com/u/6030955?v=3","gravatar_id":"","url":"https://api.github.com/users/armensg","html_url":"https://github.com/armensg","followers_url":"https://api.github.com/users/armensg/followers","following_url":"https://api.github.com/users/armensg/following{/other_user}","gists_url":"https://api.github.com/users/armensg/gists{/gist_id}","starred_url":"https://api.github.com/users/armensg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/armensg/subscriptions","organizations_url":"https://api.github.com/users/armensg/orgs","repos_url":"https://api.github.com/users/armensg/repos","events_url":"https://api.github.com/users/armensg/events{/privacy}","received_events_url":"https://api.github.com/users/armensg/received_events","type":"User","site_admin":false},"created_at":"2016-08-02T12:24:59Z","updated_at":"2016-08-02T12:24:59Z","body":"+1 this issue"}}
{"actor":{"display_login":"armensg"}}