{"id":11284,"date":"2021-02-05T10:57:07","date_gmt":"2021-02-05T10:57:07","guid":{"rendered":"https:\/\/help.instantatlas.com\/report-builder\/?page_id=11284"},"modified":"2023-07-20T15:51:33","modified_gmt":"2023-07-20T14:51:33","slug":"responsive-settings","status":"publish","type":"page","link":"https:\/\/help.reports.esriuk.com\/report-builder\/responsive-settings\/","title":{"rendered":"Views and Responsive Settings"},"content":{"rendered":"\r\n<p>Different settings are available from the <strong>Styling &gt; Views<\/strong> menu in the Report Builder editor page.<\/p>\r\n<p>Report Builder can create reports that are <strong>responsive <\/strong>&#8211; that react to the device they are being viewed on (a laptop, a tablet, a mobile phone) and change the layout of the report automatically. This ability is enabled by default but you can turn it off or customize how it behaves from the <strong>Styling &gt; Mobile View<\/strong> menu item when you are editing your report.<\/p>\r\n<p><a href=\"https:\/\/help.reports.esriuk.com\/report-builder\/wp-content\/uploads\/sites\/51\/2023\/07\/rb-2-6-styling-views-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11757\" src=\"https:\/\/help.reports.esriuk.com\/report-builder\/wp-content\/uploads\/sites\/51\/2023\/07\/rb-2-6-styling-views-menu.png\" alt=\"Report Builder views menu\" width=\"277\" height=\"917\" srcset=\"https:\/\/help.reports.esriuk.com\/report-builder\/wp-content\/uploads\/sites\/51\/2023\/07\/rb-2-6-styling-views-menu.png 277w, https:\/\/help.reports.esriuk.com\/report-builder\/wp-content\/uploads\/sites\/51\/2023\/07\/rb-2-6-styling-views-menu-91x300.png 91w\" sizes=\"auto, (max-width: 277px) 100vw, 277px\" \/><\/a><\/p>\r\n\r\n\r\n\r\n\r\n\r\n<p><!--more--><\/p>\r\n\r\n\r\n\r\n<p>When <strong>Enable Responsive Mode<\/strong> is turned on, reports will adjust their layout at three different points:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><strong>75% of original width<\/strong> &#8211; at this point the report will switch from its target width down to 100% of the <em>available width<\/em> and all content will &#8220;re-flow&#8221; to adjust to this new width. This avoids the viewer having to scroll horizontally on small screens.<\/li>\r\n<li><strong>66% of original width<\/strong> &#8211; at this point the report will force all widgets to appear in a linear flow (i.e. one underneath the other, not alongside) but will not adjust their sizes.<\/li>\r\n<li><strong>&#8220;Mobile Switch Size&#8221;<\/strong> <strong>&#8211;<\/strong> (a value configured by the report designer or <strong>500px width<\/strong> by default) &#8211; at this point all widgets are set to occupy 100% of the available width and all text-based widgets will automatically expand down to show all their content. If you want the report to <em>always<\/em> re-flow whenever the screen is smaller than you <em>designed\/desired<\/em> page size, set this value to 1 pixel less than your page size.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n\r\n\r\n<p><strong>Mobile Switch Size<\/strong> allows you to use both width and height to control when your report switches view. In normal circumstances you should only use <em>width<\/em>, since most viewers of your report will expect and be used to scrolling up and down to access content rather than left to right. Only use <em>height <\/em>if you are targeting a very specific viewer (see <em>Styling &gt; Advanced<\/em> below).<\/p>\r\n\r\n\r\n\r\n<p>Some widgets have more specialized responses to screen size changes &#8211; for example, most of the <strong>Infographic <\/strong>widgets will attempt to re-flow their content so that all the icons are visible on-screen.<\/p>\r\n\r\n\r\n\r\n<p>You can use your browser&#8217;s emulation options to replicate different mobile devices.<\/p>\r\n<p>The automatic responsive design features in Report Builder do have limits &#8211; making web pages react to every possible viewing device can be very complex. If you have a specific behavior or style that you need that is not provided by the built-in functionality remember that you can use the <strong>Styling &gt; Advanced<\/strong> menu item to override any CSS you want, including <a href=\"https:\/\/css-tricks.com\/snippets\/css\/media-queries-for-standard-devices\/\" target=\"_blank\" rel=\"noreferrer noopener\">@media queries<\/a> &#8211; but be careful!<\/p>\r\n<p>The <strong>Enable expansion<\/strong> option can be used to make a report expand to fill the screen width at larger screen sizes. In this view widgets will preserve their layout but expand their size.<\/p>\r\n<p>&nbsp;<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Different settings are available from the Styling &gt; Views menu in the Report Builder editor page. Report Builder can create reports that are responsive &#8211; that react to the device they are being viewed on (a laptop, a tablet, a mobile phone) and change the layout of the report automatically. This ability is enabled by [&hellip;]<\/p>\n","protected":false},"author":61,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11284","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/11284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/comments?post=11284"}],"version-history":[{"count":0,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/11284\/revisions"}],"wp:attachment":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/media?parent=11284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}