{"action":"created","issue":{"url":"https://api.github.com/repos/processing/p5.js/issues/1109","labels_url":"https://api.github.com/repos/processing/p5.js/issues/1109/labels{/name}","comments_url":"https://api.github.com/repos/processing/p5.js/issues/1109/comments","events_url":"https://api.github.com/repos/processing/p5.js/issues/1109/events","html_url":"https://github.com/processing/p5.js/issues/1109","id":116895861,"number":1109,"title":"p5.Element size properties are not refreshed when id or class changes","user":{"login":"Ucodia","id":1795860,"avatar_url":"https://avatars.githubusercontent.com/u/1795860?v=3","gravatar_id":"","url":"https://api.github.com/users/Ucodia","html_url":"https://github.com/Ucodia","followers_url":"https://api.github.com/users/Ucodia/followers","following_url":"https://api.github.com/users/Ucodia/following{/other_user}","gists_url":"https://api.github.com/users/Ucodia/gists{/gist_id}","starred_url":"https://api.github.com/users/Ucodia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ucodia/subscriptions","organizations_url":"https://api.github.com/users/Ucodia/orgs","repos_url":"https://api.github.com/users/Ucodia/repos","events_url":"https://api.github.com/users/Ucodia/events{/privacy}","received_events_url":"https://api.github.com/users/Ucodia/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-11-14T04:48:10Z","updated_at":"2015-11-14T13:16:25Z","closed_at":null,"body":"Fairly easy to reproduce.\r\n\r\nConsider you have these styles.\r\n\r\n```css\r\n.my-class {\r\n  width: 600px;\r\n}\r\n\r\n#my-id {\r\n  height: 50px;\r\n}\r\n```\r\n\r\nJust create an element and compare `p5.Element` size properties with internal DOM element properties.\r\n\r\n```javascript\r\nvar myInput = createInput('');\r\nconsole.log('(' + myInput.width + ', ' + myInput.height + ') / ' +\r\n            '(' + myInput.elt.offsetWidth + ', ' + myInput.elt.offsetHeight + ')');\r\n```\r\n`(173, 21) / (173, 21)`\r\n\r\nThen change the width by applying the class.\r\n\r\n```javascript\r\nmyInput.class('my-class');\r\nconsole.log('(' + myInput.width + ', ' + myInput.height + ') / ' +\r\n            '(' + myInput.elt.offsetWidth + ', ' + myInput.elt.offsetHeight + ')');\r\n```\r\n`(173, 21) / (600, 21)`\r\n\r\nYou can already notice that the size is not updated on `p5.Element`. Same thing with id changes.\r\n\r\n```javascript\r\nmyInput.id('my-id');\r\nconsole.log('(' + myInput.width + ', ' + myInput.height + ') / ' +\r\n            '(' + myInput.elt.offsetWidth + ', ' + myInput.elt.offsetHeight + ')');\r\n```\r\n`(173, 21) / (600, 50)`\r\n\r\nThis makes it impractical to place styled elements within a sketch."},"comment":{"url":"https://api.github.com/repos/processing/p5.js/issues/comments/156694737","html_url":"https://github.com/processing/p5.js/issues/1109#issuecomment-156694737","issue_url":"https://api.github.com/repos/processing/p5.js/issues/1109","id":156694737,"user":{"login":"lmccart","id":191056,"avatar_url":"https://avatars.githubusercontent.com/u/191056?v=3","gravatar_id":"","url":"https://api.github.com/users/lmccart","html_url":"https://github.com/lmccart","followers_url":"https://api.github.com/users/lmccart/followers","following_url":"https://api.github.com/users/lmccart/following{/other_user}","gists_url":"https://api.github.com/users/lmccart/gists{/gist_id}","starred_url":"https://api.github.com/users/lmccart/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lmccart/subscriptions","organizations_url":"https://api.github.com/users/lmccart/orgs","repos_url":"https://api.github.com/users/lmccart/repos","events_url":"https://api.github.com/users/lmccart/events{/privacy}","received_events_url":"https://api.github.com/users/lmccart/received_events","type":"User","site_admin":false},"created_at":"2015-11-14T13:16:25Z","updated_at":"2015-11-14T13:16:25Z","body":"closed with https://github.com/processing/p5.js/pull/1108"}}