nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

WAB Custom Widget Size

JerryStafurik

Hi,

I've developed a custom widget for WAB, that I need to change the default size of. How can I change the default widget panel height? I need to make the panel smaller, so that it doesn't take up as much screen space.

Thanks

タグ付きの投稿をもっと見る

Accepted answers

RobertScheitlin__GISP

Jerry,

There is not a absolute way to do this. There are going to be times when the widget is in a panel that will not be resized. If the widget is in a onScreenWidgetPanel then this will work:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onOpen<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>w<SPAN class="punctuation token">:</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN>h<SPAN class="punctuation token">:</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Jerry,

The widget size can be set in the apps main config.json by adding a height and width property to the widgets position object:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"position"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"left"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">55</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"top"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">45</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"width"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"height"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"relativeTo"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"map"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"placeholderIndex"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"_5"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"closeable"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"uri"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets/eSearch/Widget"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"openAtStart"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"eSearch"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"config"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"configs/eSearch/config__5.json"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"2.5.0.1"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JerryStafurik

Thanks for your response Robert. This is a global setting in the app for the widget; I was wondering whether it's possible to apply this to the widget itself. The widget I'm developing is going to be used in ArcGIS Portal 10.5.1 apps as well, and I would like to make sure that where ever the widget is used, the dimension settings are shipped with the widget. Is this possible?

RobertScheitlin__GISP

Jerry,

There is not a absolute way to do this. There are going to be times when the widget is in a panel that will not be resized. If the widget is in a onScreenWidgetPanel then this will work:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onOpen<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPanel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>w<SPAN class="punctuation token">:</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN>h<SPAN class="punctuation token">:</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

JerryStafurik

Thanks Robert, this worked for me.

AdamGebhart

@RobertScheitlin__GISP

Should the addition of the height and width work for the Legend widget too? I have an app in which users have requested it be on at startup (I personally don't like any other than the Popup Panel on at startup but that's me). I tried adding the height and width to the Legend and as onScreen widget and it didn't seem to take. This app is 2.13 and in Foldable theme.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.