{"action":"opened","issue":{"url":"https://api.github.com/repos/OscarGodson/EpicEditor/issues/385","labels_url":"https://api.github.com/repos/OscarGodson/EpicEditor/issues/385/labels{/name}","comments_url":"https://api.github.com/repos/OscarGodson/EpicEditor/issues/385/comments","events_url":"https://api.github.com/repos/OscarGodson/EpicEditor/issues/385/events","html_url":"https://github.com/OscarGodson/EpicEditor/issues/385","id":123378253,"number":385,"title":"Stateful Sizing","user":{"login":"kousu","id":987487,"avatar_url":"https://avatars.githubusercontent.com/u/987487?v=3","gravatar_id":"","url":"https://api.github.com/users/kousu","html_url":"https://github.com/kousu","followers_url":"https://api.github.com/users/kousu/followers","following_url":"https://api.github.com/users/kousu/following{/other_user}","gists_url":"https://api.github.com/users/kousu/gists{/gist_id}","starred_url":"https://api.github.com/users/kousu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kousu/subscriptions","organizations_url":"https://api.github.com/users/kousu/orgs","repos_url":"https://api.github.com/users/kousu/repos","events_url":"https://api.github.com/users/kousu/events{/privacy}","received_events_url":"https://api.github.com/users/kousu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-12-21T23:07:40Z","updated_at":"2015-12-21T23:07:40Z","closed_at":null,"body":"In short: EpicEditor sets its size statefully, at init, in pixels, and I think this is wrong.\r\n\r\nI am trying to use EpicEditor for a progressive enhancement over a textarea. If javascript is missing, the textarea should work. If javascript is available, EpicEditor should load, with `options = {textarea: \"post_content\"}`.\r\n\r\nSince EpicEditor generates a separate <iframe> instead of styling the textarea, I have both but hide the EpicEditor <div> unless javascript exists to flip it:\r\n\r\n\r\n```\r\n<form id=\"editor_form\">\r\n<textarea id=\"post_content\" name=\"post_content\" style=\"width: 100%; height: 80%\">{{post_content}}</textarea>\r\n<div id=\"epiceditor\" style=\"width: 100%; height: 80%; display: none\"></div>\r\n</form>\r\n```\r\n\r\nThen I use this javascript to linkup the two:\r\n```\r\n$(document).ready(function() {\r\n  var editor = new EpicEditor({\r\n                          textarea: 'post_content',\r\n                         }).load();\r\n\r\n  // on (i.e. just before) submit, sync the EpicEditor with the original <textarea>\r\n  $(\"#editor_form\").submit(function() {\r\n    $(\"#post_content\").val(editor.exportFile());\r\n  });\r\n\r\n   // If we hava Javascript, enable EpicEditor instead of the plain textarea\r\n   $(\"#post_content\").css(\"display\", \"none\");\r\n   $(\"#epic_editor\").css(\"display\", \"\");\r\n\r\n});\r\n</script>\r\n```\r\n\r\nBut this doesn't work, because EpicEditor seems to be interpreting \"display: none\" as \"width: 0px; height: 0px\", and it does it like turtles all the way down:\r\n```\r\n<div id=\"epiceditor\" style=\"width: 100%; height: 0px; display: none;\">\r\n<iframe style=\"width: 0px; height: 0px;\" scrolling=\"no\" id=\"epiceditor-7725\" frameborder=\"0\">\r\n#document\r\n<html>\r\n<body style=\"height: 0px;\"><div style=\"position: relative;\" id=\"epiceditor-wrapper\" class=\"epiceditor-edit-mode\"><iframe style=\"width: 0px; height: 0px; position: absolute;\" id=\"epiceditor-editor-frame\" frameborder=\"0\"></iframe><iframe style=\"width: 0px; height: 0px; position: absolute; left: -999999px;\" id=\"epiceditor-previewer-frame\" frameborder=\"0\"></iframe><div id=\"epiceditor-utilbar\"><button title=\"Toggle Preview Mode\" class=\"epiceditor-toggle-btn epiceditor-toggle-preview-btn\"></button> <button title=\"Toggle Edit Mode\" class=\"epiceditor-toggle-btn epiceditor-toggle-edit-btn\"></button> <button title=\"Enter Fullscreen\" class=\"epiceditor-fullscreen-btn\"></button></div></div></body>\r\n</html>\r\n\r\n</iframe></div>\r\n```\r\n\r\nThere are at least four tags there that have been zapped to zero size.\r\nWhen \r\n```\r\n$(\"#epiceditor\").css(\"display\",\"\");\r\n```\r\nhappens, EpicEditor sets `#epiceditor { width: 100%; }` but ignores height, and even if it didn't it would have to find all the subelements that it zapped and undo their zappiness.\r\n\r\nIs there a reason percentage-sizing is a bad idea?"}}