{"id":1734,"date":"2022-08-23T10:00:00","date_gmt":"2022-08-23T09:00:00","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/fmstel\/?p=1734"},"modified":"2022-08-23T09:22:04","modified_gmt":"2022-08-23T08:22:04","slug":"additional-scroll-bars-in-canvas","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/fmstel\/2022\/08\/23\/additional-scroll-bars-in-canvas\/","title":{"rendered":"Additional scroll bars in canvas"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">The Problem<\/h2>\n\n\n\n<p>I recently noticed a few pages in my content in Canvas had developed scroll bars at the bottom. The bars were greyed out and had no function. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/scroll-bar-bottom-1024x510.png\" alt=\"Scroll bar visible at the bottom of the canvas page.\" class=\"wp-image-1735\" srcset=\"https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/scroll-bar-bottom-1024x510.png 1024w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/scroll-bar-bottom-300x149.png 300w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/scroll-bar-bottom-768x382.png 768w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/scroll-bar-bottom.png 1177w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>Scroll bar visible at the bottom of the page<\/figcaption><\/figure>\n\n\n\n<p>I started to notice a pattern. Any content which took up the whole width of the page (100%) was triggering the scroll bars. It could be any type of content; a banner image, an embedded <a href=\"https:\/\/en-gb.padlet.com\/\">padlet<\/a>, or like in my example progress bars.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Fix<\/h2>\n\n\n\n<p>Canvas must have changed the HTML &#8220;overflow&#8221; settings somewhere on their end. An easy fix is to adjust any 100% width content to be 99% instead. This can be done in the HTML editor area accessed by this icon in the edit screen: <strong><span style=\"color:#044865\" class=\"has-inline-color\">&lt;\/&gt;<\/span><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/html-editor-1024x588.png\" alt=\"Canvas HTML editor showing width element.\" class=\"wp-image-1736\" width=\"618\" height=\"354\" srcset=\"https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/html-editor-1024x588.png 1024w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/html-editor-300x172.png 300w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/html-editor-768x441.png 768w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/html-editor-1200x689.png 1200w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/html-editor.png 1231w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>Canvas HTML editor showing width element<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/no-scroll-bar-1024x478.png\" alt=\"Scroll bar has disappeared on the canvas page.\" class=\"wp-image-1737\" width=\"624\" height=\"291\" srcset=\"https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/no-scroll-bar-1024x478.png 1024w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/no-scroll-bar-300x140.png 300w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/no-scroll-bar-768x359.png 768w, https:\/\/blogs.ncl.ac.uk\/fmstel\/files\/2022\/08\/no-scroll-bar.png 1175w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>Scroll bar has disappeared <\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Why they are there and how to get rid of them!<\/p>\n","protected":false},"author":7576,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[12,531,530],"class_list":["post-1734","post","type-post","status-publish","format-standard","hentry","category-guide","tag-canvas","tag-easy-fix","tag-scroll-bars"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/posts\/1734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/users\/7576"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/comments?post=1734"}],"version-history":[{"count":11,"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/posts\/1734\/revisions"}],"predecessor-version":[{"id":1754,"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/posts\/1734\/revisions\/1754"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/media?parent=1734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/categories?post=1734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/fmstel\/wp-json\/wp\/v2\/tags?post=1734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}