<?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 TimeSlider Component: layout = wide in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/timeslider-component-layout-wide/m-p/1674667#M88004</link>
    <description>&lt;P&gt;Working with the TimeSlider, I came across the layout property (which is included as part of the demo code).&amp;nbsp; The 'compact' layout seems to work great on any screen (perhaps, to be expected); however, the 'wide' layout looks terrible on any screen: the 'slider control' gets smushed and you can see the interval-labels render stacked (and this on an ultra-wide screen).&amp;nbsp;&amp;nbsp;&lt;BR /&gt;&lt;BR /&gt;Demo:&amp;nbsp;&lt;A href="https://developers.arcgis.com/javascript/latest/storybook/map-components/iframe.html?singleStory=true&amp;amp;globals=&amp;amp;args=layout%3Awide&amp;amp;id=arcgis-time-slider--demo&amp;amp;viewMode=story" target="_blank" rel="noopener"&gt;arcgis-time-slider--demo&lt;/A&gt;&amp;nbsp;'wide' layout.&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="D_Atkins_0-1766495990041.png" style="width: 999px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/146012i1F37877E696E3E74/image-size/large?v=v2&amp;amp;px=999" role="button" title="D_Atkins_0-1766495990041.png" alt="D_Atkins_0-1766495990041.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;I can't imagine this is the intended design?&amp;nbsp;&lt;BR /&gt;&lt;BR /&gt;By a similar token, the 'auto' layout never seems to fire either way, so by default we get the nice looking 'compact' layout all the same.&lt;BR /&gt;&lt;BR /&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="D_Atkins_0-1766495583700.png" style="width: 999px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/146011iB5F4518B9C33BE45/image-size/large?v=v2&amp;amp;px=999" role="button" title="D_Atkins_0-1766495583700.png" alt="D_Atkins_0-1766495583700.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
    <pubDate>Tue, 23 Dec 2025 13:20:19 GMT</pubDate>
    <dc:creator>D_Atkins</dc:creator>
    <dc:date>2025-12-23T13:20:19Z</dc:date>
    <item>
      <title>TimeSlider Component: layout = wide</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/timeslider-component-layout-wide/m-p/1674667#M88004</link>
      <description>&lt;P&gt;Working with the TimeSlider, I came across the layout property (which is included as part of the demo code).&amp;nbsp; The 'compact' layout seems to work great on any screen (perhaps, to be expected); however, the 'wide' layout looks terrible on any screen: the 'slider control' gets smushed and you can see the interval-labels render stacked (and this on an ultra-wide screen).&amp;nbsp;&amp;nbsp;&lt;BR /&gt;&lt;BR /&gt;Demo:&amp;nbsp;&lt;A href="https://developers.arcgis.com/javascript/latest/storybook/map-components/iframe.html?singleStory=true&amp;amp;globals=&amp;amp;args=layout%3Awide&amp;amp;id=arcgis-time-slider--demo&amp;amp;viewMode=story" target="_blank" rel="noopener"&gt;arcgis-time-slider--demo&lt;/A&gt;&amp;nbsp;'wide' layout.&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="D_Atkins_0-1766495990041.png" style="width: 999px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/146012i1F37877E696E3E74/image-size/large?v=v2&amp;amp;px=999" role="button" title="D_Atkins_0-1766495990041.png" alt="D_Atkins_0-1766495990041.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;I can't imagine this is the intended design?&amp;nbsp;&lt;BR /&gt;&lt;BR /&gt;By a similar token, the 'auto' layout never seems to fire either way, so by default we get the nice looking 'compact' layout all the same.&lt;BR /&gt;&lt;BR /&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="D_Atkins_0-1766495583700.png" style="width: 999px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/146011iB5F4518B9C33BE45/image-size/large?v=v2&amp;amp;px=999" role="button" title="D_Atkins_0-1766495583700.png" alt="D_Atkins_0-1766495583700.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Tue, 23 Dec 2025 13:20:19 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/timeslider-component-layout-wide/m-p/1674667#M88004</guid>
      <dc:creator>D_Atkins</dc:creator>
      <dc:date>2025-12-23T13:20:19Z</dc:date>
    </item>
    <item>
      <title>Re: TimeSlider Component: layout = wide</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/timeslider-component-layout-wide/m-p/1674676#M88005</link>
      <description>&lt;P&gt;Hi&amp;nbsp;&lt;a href="https://community.esri.com/t5/user/viewprofilepage/user-id/848899"&gt;@D_Atkins&lt;/a&gt;&amp;nbsp;,&lt;/P&gt;&lt;DIV&gt;&lt;DIV&gt;It looks like the time slider in your screenshots is placed in the bottom-right slot of the map component, which is restricting its width. If you set a relative width on the time slider(or remove it from the slot), it should adjust its layout in ‘auto’ and look much better in a wide layout when not being squeezed into the narrow slot.&amp;nbsp;&lt;/DIV&gt;&lt;BR /&gt;&lt;A href="https://codepen.io/sagewall/pen/ByzaLMm?editors=1010" target="_blank"&gt;https://codepen.io/sagewall/pen/ByzaLMm?editors=1010&lt;/A&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;/DIV&gt;</description>
      <pubDate>Tue, 23 Dec 2025 14:31:04 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/timeslider-component-layout-wide/m-p/1674676#M88005</guid>
      <dc:creator>Sage_Wall</dc:creator>
      <dc:date>2025-12-23T14:31:04Z</dc:date>
    </item>
  </channel>
</rss>

