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; } } }

How to change WAB widget window size?

DanielChantlos1

Is there a way I can modify code in WAB Developer Edition to change the size of the widget window for specific widgets in LaunchPad theme? I am using WAB Developer Edition 2.1

Find more posts tagged with

Accepted answers

All comments

GeoRig

Probably quite late but in my case, I had to re-size the widget within the response part of function and could not get the panel details with 'this'. I modified the code a bit and below code helped me to set resize the widget.

// Re-size the widget
panel = _widgetManager.activeWidget.getPanel() //With this line you can fetch the concerned widget
panel.position.width = 600; // Set your width value
panel.setPosition(panel.position);
panel.panelManager.normalizePanel(panel);

Hope this helps!!!

RobertScheitlin__GISP

Anish,

In your startup function in the widget save the widgets original size to a widget var and then in the onClose function (you may have to add this function to the widget) get set the widgets size back to the original size var saved earlier.

Anish_Adhikari

This has been super helpful for me. However, I wanted to modify it a bit and wanted the panel to open initially on default settings. After user clicks on the map, I wanted the panel to resize to my specified size. I have added the code on the map click event listener and the window successfully resizes. Now I want to add some code to the onclose function that will return the panel to the default state and not resized. I wanted to do this because the window is taking too much screen real estate once the onclick event is initizlized.

I have declared my variable in startup function :

var panel = this.getPanel();

Added These Lines on Startup event

panel.position.width = 820;
panel.setPosition(panel.position);
panel.panelManager.normalizePanel(panel);

Now not sure how to reset the panel to original size on close event

RobertScheitlin__GISP

All,

Better yet, because the widget will revert to normal size once closed and reopened, you should just add a new onOpen function and not use the startup addition suggested earlier:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">onOpen</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">var</SPAN> panel <SPAN class="operator token">=</SPAN> <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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Phil,

Nice catch. Here is the modified code to correct that issue:

<SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <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>
panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN>
panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

PhilLarkin1

I gave your code a try. It works pretty well. However, if a user is to use the resize handle the widget size will default to width:400 height:400. The resize handle will not allow any size smaller than 400 after that. (400 is an estimate. The widget is reset to whatever the default is.)

Any ideas on how to overcome this issue? I might just remove the ability to resize as shown in your example here: disable/hide resize handle for Widget

Also, ESRI should probably be supplementing your salary. Thanks for all of your hard work on the forums. You have helped many people!

RobertScheitlin__GISP

Daniel,

It does not really matter. I placed it right before the end of the function.

DanielChantlos1

This may be a simple question, but what lines do you place this in the startup function?

RobertScheitlin__GISP

Daniel,

Another way to do it (other than Robb's way). If you want to resize a specific widget in the Launchpad theme then I would add this code to the startup function in that specific widgets Widget.js:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> panel <SPAN class="operator token">=</SPAN> <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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> pos <SPAN class="operator token">=</SPAN> panel<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pos<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> <SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; panel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setPosition</SPAN><SPAN class="punctuation token">(</SPAN>pos<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; panel<SPAN class="punctuation token">.</SPAN>panelManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizePanel</SPAN><SPAN class="punctuation token">(</SPAN>panel<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>

MichaelRobb

For WABde 2.0 you would go to the widget of interest.

For example, for the About Widget...

[app#]\widgets\About\css\style.css

DanielChantlos1

I looked in the OnScreenWidgetPanel.js file and do not see these lines of code inside.

Am I missing something? Also, I am hoping to set different sizes for different widgets.

AdrianWelsh

Daniel,

Take a look at the example here:

Widget on-screen configuration—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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