<?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 Re: Styling - change size of widget (API 4.x) in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-change-size-of-widget-api-4-x/m-p/1134560#M75953</link>
    <description>&lt;P&gt;Just messing around with the Esri Editor widget sample (&lt;A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-editor-basic" target="_blank" rel="noopener"&gt;Editor sample code&lt;/A&gt;&amp;nbsp;), I added this and could get some size changes.&amp;nbsp; &amp;nbsp;Somewhere in the CSS is your desired goal.&amp;nbsp;&amp;nbsp;&lt;/P&gt;&lt;LI-CODE lang="c"&gt;&amp;lt;style&amp;gt;
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      .esri-editor .esri-item-list__scroller {
        max-height: 450px;
      }
      .esri-view-height-small .esri-expand .esri-widget--panel, .esri-view-height-small .esri-expand .esri-widget--panel-height-only, .esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel, .esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel-height-only {
          max-height: 620px;
          min-height: 500px;
      }
      .esri-ui .esri-editor .esri-item-list__scroller {
          max-height: 390px;
      }
&amp;lt;/style&amp;gt;&lt;/LI-CODE&gt;</description>
    <pubDate>Tue, 18 Jan 2022 14:49:23 GMT</pubDate>
    <dc:creator>JeffreyWilkerson</dc:creator>
    <dc:date>2022-01-18T14:49:23Z</dc:date>
    <item>
      <title>Styling - change size of widget (API 4.x)</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-change-size-of-widget-api-4-x/m-p/1134295#M75938</link>
      <description>&lt;P&gt;Hi&lt;/P&gt;&lt;P&gt;I am struggling with adjusting the styling (heights) of widgets.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;Example:&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;(&lt;STRONG&gt;&lt;FONT color="#339966"&gt;Green box below&lt;/FONT&gt;&lt;/STRONG&gt;)&amp;nbsp;In this &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html" target="_self"&gt;editor&lt;/A&gt; widget I could change the height of the content panel&amp;nbsp;&lt;/P&gt;&lt;P&gt;(&lt;FONT color="#FF0000"&gt;&lt;STRONG&gt;Red box below&lt;/STRONG&gt;&lt;/FONT&gt;)&amp;nbsp; However, none of the CSS classes allow me to change the feature scroll list&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ZA1_0-1642407860020.png" style="width: 621px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/31632iBBF4BE8CBD532252/image-dimensions/621x340?v=v2" width="621" height="340" role="button" title="ZA1_0-1642407860020.png" alt="ZA1_0-1642407860020.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;Changing the height on these CSS classes does not change size of &lt;FONT color="#FF0000"&gt;&lt;STRONG&gt;red box&amp;nbsp;&lt;/STRONG&gt;&lt;/FONT&gt;&lt;STRONG&gt;:&amp;nbsp;&lt;/STRONG&gt;&lt;/P&gt;&lt;BLOCKQUOTE&gt;&lt;DIV&gt;&lt;DIV&gt;&lt;SPAN&gt;esri-item-list__scroller&lt;/SPAN&gt;&lt;/DIV&gt;&lt;DIV&gt;&lt;DIV&gt;&lt;DIV&gt;&lt;SPAN&gt;esri-item-list esri-widget&lt;/SPAN&gt;&lt;/DIV&gt;&lt;DIV&gt;&lt;DIV&gt;&lt;DIV&gt;&lt;SPAN&gt;esri-item-list__filter-container&lt;/SPAN&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/BLOCKQUOTE&gt;&lt;P&gt;&lt;STRONG&gt;Ideally: &lt;/STRONG&gt;Is there a way to change size of widget, and the child nodes change accordingly?&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;Or&lt;/STRONG&gt; if this is not possible, does anyone know how to change the size of the feature list scroll (shown above)&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;Thanks&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Mon, 17 Jan 2022 08:33:41 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-change-size-of-widget-api-4-x/m-p/1134295#M75938</guid>
      <dc:creator>ZA1</dc:creator>
      <dc:date>2022-01-17T08:33:41Z</dc:date>
    </item>
    <item>
      <title>Re: Styling - change size of widget (API 4.x)</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-change-size-of-widget-api-4-x/m-p/1134560#M75953</link>
      <description>&lt;P&gt;Just messing around with the Esri Editor widget sample (&lt;A href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-editor-basic" target="_blank" rel="noopener"&gt;Editor sample code&lt;/A&gt;&amp;nbsp;), I added this and could get some size changes.&amp;nbsp; &amp;nbsp;Somewhere in the CSS is your desired goal.&amp;nbsp;&amp;nbsp;&lt;/P&gt;&lt;LI-CODE lang="c"&gt;&amp;lt;style&amp;gt;
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      .esri-editor .esri-item-list__scroller {
        max-height: 450px;
      }
      .esri-view-height-small .esri-expand .esri-widget--panel, .esri-view-height-small .esri-expand .esri-widget--panel-height-only, .esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel, .esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel-height-only {
          max-height: 620px;
          min-height: 500px;
      }
      .esri-ui .esri-editor .esri-item-list__scroller {
          max-height: 390px;
      }
&amp;lt;/style&amp;gt;&lt;/LI-CODE&gt;</description>
      <pubDate>Tue, 18 Jan 2022 14:49:23 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/styling-change-size-of-widget-api-4-x/m-p/1134560#M75953</guid>
      <dc:creator>JeffreyWilkerson</dc:creator>
      <dc:date>2022-01-18T14:49:23Z</dc:date>
    </item>
  </channel>
</rss>

