How to change WAB widget window size?

7118
22
08-23-2016 07:55 AM
Highlighted
Occasional Contributor

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

Reply
0 Kudos
22 Replies
Highlighted
MVP Notable Contributor
Reply
0 Kudos
Highlighted
Occasional Contributor

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.

Reply
0 Kudos
Highlighted
Regular Contributor II

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

For example, for the About Widget...

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

Highlighted
MVP Esteemed Contributor

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:

        var panel = this.getPanel();
        var pos = panel.position;
        pos.width = 600;
        panel.setPosition(pos);
        panel.panelManager.normalizePanel(panel);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Highlighted
Occasional Contributor

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Daniel,

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

Reply
0 Kudos
Highlighted
Occasional Contributor III

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! 

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Phil,

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

var panel = this.getPanel();
panel.position.width = 600;
panel.setPosition(panel.position);
panel.panelManager.normalizePanel(panel);
Highlighted
MVP Esteemed Contributor

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:

      onOpen(){
        var panel = this.getPanel();
        panel.position.width = 600;
        panel.setPosition(panel.position);
        panel.panelManager.normalizePanel(panel);
      },