<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Making the MapView Div Padding Dependent on Screen Width? in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/making-the-mapview-div-padding-dependent-on-screen/m-p/1197449#M78104</link>
    <description>&lt;P&gt;Hi there,&amp;nbsp;&lt;/P&gt;&lt;P&gt;I am wondering how I may be able to set the map view div padding to change dependent on the width of the screen within Javascript? Currently my app is using padding to push map elements to the side for the action bar. but in mobile this separation is unwanted.&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ArianaBernal_1-1659110967191.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/47236iCFA34C86B0158E63/image-size/medium?v=v2&amp;amp;px=400" role="button" title="ArianaBernal_1-1659110967191.png" alt="ArianaBernal_1-1659110967191.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ArianaBernal_0-1659110952583.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/47235i75A7B0236D20F7DF/image-size/medium?v=v2&amp;amp;px=400" role="button" title="ArianaBernal_0-1659110952583.png" alt="ArianaBernal_0-1659110952583.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ArianaBernal_4-1659111110958.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/47240i1208B1328889F789/image-size/medium?v=v2&amp;amp;px=400" role="button" title="ArianaBernal_4-1659111110958.png" alt="ArianaBernal_4-1659111110958.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;I see in the documentation there is a watch breakpoint function but I don't think it works for what I am trying to accomplish.&lt;/P&gt;&lt;P&gt;I also tried setting a media query for padding in CSS but this doesn't seem to respond. Is there another method of accomplishing this?&amp;nbsp;&lt;/P&gt;&lt;P&gt;here is what I was trying with the watch breakpoint function:&amp;nbsp;&lt;/P&gt;&lt;LI-CODE lang="javascript"&gt;padding: view.watch("widthBreakpoint", function (Val) {
      if (Val === "xlarge" || Val === "large" || Val === "medium") {
        padding: {
          left: 50;
        }
      }
    }),&lt;/LI-CODE&gt;&lt;DIV&gt;&lt;DIV&gt;&amp;nbsp;&lt;/DIV&gt;&lt;/DIV&gt;&lt;P&gt;Thank you&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
    <pubDate>Fri, 29 Jul 2022 16:29:06 GMT</pubDate>
    <dc:creator>ArianaBernal</dc:creator>
    <dc:date>2022-07-29T16:29:06Z</dc:date>
    <item>
      <title>Making the MapView Div Padding Dependent on Screen Width?</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/making-the-mapview-div-padding-dependent-on-screen/m-p/1197449#M78104</link>
      <description>&lt;P&gt;Hi there,&amp;nbsp;&lt;/P&gt;&lt;P&gt;I am wondering how I may be able to set the map view div padding to change dependent on the width of the screen within Javascript? Currently my app is using padding to push map elements to the side for the action bar. but in mobile this separation is unwanted.&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ArianaBernal_1-1659110967191.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/47236iCFA34C86B0158E63/image-size/medium?v=v2&amp;amp;px=400" role="button" title="ArianaBernal_1-1659110967191.png" alt="ArianaBernal_1-1659110967191.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ArianaBernal_0-1659110952583.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/47235i75A7B0236D20F7DF/image-size/medium?v=v2&amp;amp;px=400" role="button" title="ArianaBernal_0-1659110952583.png" alt="ArianaBernal_0-1659110952583.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ArianaBernal_4-1659111110958.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/47240i1208B1328889F789/image-size/medium?v=v2&amp;amp;px=400" role="button" title="ArianaBernal_4-1659111110958.png" alt="ArianaBernal_4-1659111110958.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;I see in the documentation there is a watch breakpoint function but I don't think it works for what I am trying to accomplish.&lt;/P&gt;&lt;P&gt;I also tried setting a media query for padding in CSS but this doesn't seem to respond. Is there another method of accomplishing this?&amp;nbsp;&lt;/P&gt;&lt;P&gt;here is what I was trying with the watch breakpoint function:&amp;nbsp;&lt;/P&gt;&lt;LI-CODE lang="javascript"&gt;padding: view.watch("widthBreakpoint", function (Val) {
      if (Val === "xlarge" || Val === "large" || Val === "medium") {
        padding: {
          left: 50;
        }
      }
    }),&lt;/LI-CODE&gt;&lt;DIV&gt;&lt;DIV&gt;&amp;nbsp;&lt;/DIV&gt;&lt;/DIV&gt;&lt;P&gt;Thank you&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Fri, 29 Jul 2022 16:29:06 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/making-the-mapview-div-padding-dependent-on-screen/m-p/1197449#M78104</guid>
      <dc:creator>ArianaBernal</dc:creator>
      <dc:date>2022-07-29T16:29:06Z</dc:date>
    </item>
  </channel>
</rss>

