{"action":"created","issue":{"url":"https://api.github.com/repos/legalthings/angular-signature/issues/15","repository_url":"https://api.github.com/repos/legalthings/angular-signature","labels_url":"https://api.github.com/repos/legalthings/angular-signature/issues/15/labels{/name}","comments_url":"https://api.github.com/repos/legalthings/angular-signature/issues/15/comments","events_url":"https://api.github.com/repos/legalthings/angular-signature/issues/15/events","html_url":"https://github.com/legalthings/angular-signature/pull/15","id":153042293,"number":15,"title":"Remove initial styling for canvas element (width and height)","user":{"login":"ahmehri","id":3668245,"avatar_url":"https://avatars.githubusercontent.com/u/3668245?v=3","gravatar_id":"","url":"https://api.github.com/users/ahmehri","html_url":"https://github.com/ahmehri","followers_url":"https://api.github.com/users/ahmehri/followers","following_url":"https://api.github.com/users/ahmehri/following{/other_user}","gists_url":"https://api.github.com/users/ahmehri/gists{/gist_id}","starred_url":"https://api.github.com/users/ahmehri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ahmehri/subscriptions","organizations_url":"https://api.github.com/users/ahmehri/orgs","repos_url":"https://api.github.com/users/ahmehri/repos","events_url":"https://api.github.com/users/ahmehri/events{/privacy}","received_events_url":"https://api.github.com/users/ahmehri/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-05-04T15:31:48Z","updated_at":"2016-07-21T13:32:02Z","closed_at":"2016-05-17T08:45:26Z","pull_request":{"url":"https://api.github.com/repos/legalthings/angular-signature/pulls/15","html_url":"https://github.com/legalthings/angular-signature/pull/15","diff_url":"https://github.com/legalthings/angular-signature/pull/15.diff","patch_url":"https://github.com/legalthings/angular-signature/pull/15.patch"},"body":"What I liked about this angular module is a feature that was described in the following statement:\r\n> this library doesn't apply any styling\r\n\r\nHowever, this statement is not completely correct, in fact this library applies a style to the canvas element at the compilation time of the directive. This style consists of the width and height of the canvas.\r\n\r\nIn addition, a default values for the width and height are used if no values have been provided (568px for the width and 220px for the height), which forces you to provide values for these properties if the default ones are not suitable for your case.\r\n\r\nOne of those cases is when you have a responsive design and hence you don't have fixed values for width and height, an example can be found in [this plunker](https://plnkr.co/edit/P8bdR3FbfCEaonPwF9JX?p=preview).\r\nIn order to see this example properly, open the embedded view, use the device mode of google chrome dev tools and select **Mobile S** layout (320 * 809), you'll find the canvas width greater than the one of the viewport.\r\n\r\nThe solution to this issue is to remove the initial styling of the canvas element. The result of applying this solution can be found [here](https://plnkr.co/edit/aGn22cqrUHYzi5iILEXd?p=preview)."},"comment":{"url":"https://api.github.com/repos/legalthings/angular-signature/issues/comments/234253711","html_url":"https://github.com/legalthings/angular-signature/pull/15#issuecomment-234253711","issue_url":"https://api.github.com/repos/legalthings/angular-signature/issues/15","id":234253711,"user":{"login":"ahmehri","id":3668245,"avatar_url":"https://avatars.githubusercontent.com/u/3668245?v=3","gravatar_id":"","url":"https://api.github.com/users/ahmehri","html_url":"https://github.com/ahmehri","followers_url":"https://api.github.com/users/ahmehri/followers","following_url":"https://api.github.com/users/ahmehri/following{/other_user}","gists_url":"https://api.github.com/users/ahmehri/gists{/gist_id}","starred_url":"https://api.github.com/users/ahmehri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ahmehri/subscriptions","organizations_url":"https://api.github.com/users/ahmehri/orgs","repos_url":"https://api.github.com/users/ahmehri/repos","events_url":"https://api.github.com/users/ahmehri/events{/privacy}","received_events_url":"https://api.github.com/users/ahmehri/received_events","type":"User","site_admin":false},"created_at":"2016-07-21T13:32:02Z","updated_at":"2016-07-21T13:32:02Z","body":"Hello,\n\nYes, in my case, I dealt with this situation by styling the signature\ncanvas via CSS.\n\nOn Wed, Jul 20, 2016 at 5:01 PM, Jörg Sawatzki <notifications@github.com>\nwrote:\n\n> Hi,\n>\n> after updating to the latest release, our signature pads suddenly stopped\n> working. The width and height of the canvas is always 0, while the parent\n> container (div.signature) is the width and height we have set. What is the\n> preferred way to deal with this now? Style .signature canvas via CSS to\n> take the width and height of the container? And why did you remove it from\n> the canvas, but not from the directive / container? I think the attributes\n> width and height can completely be removed from the scope, as they are of\n> no use anymore...\n>\n> Thanks,\n>\n> Jörg\n>\n> —\n> You are receiving this because you authored the thread.\n> Reply to this email directly, view it on GitHub\n> <https://github.com/legalthings/angular-signature/pull/15#issuecomment-233996008>,\n> or mute the thread\n> <https://github.com/notifications/unsubscribe-auth/ADf5FbiIKZAmlFYHFGDkLn-ScV7ElDZwks5qXkZogaJpZM4IXQ-2>\n> .\n>\n\n\n\n-- \nAhmed Elmehri.\nJava / Java EE Web Developer.\n"}}
{"actor":{"display_login":"ahmehri"}}