How do you set a custom javascript widget's size?

[LanceGoens]

I'm brand new to working with dojo and the WAB. I'm creating a custom widget and I'm trying to control the default size of the container "window" that opens to house the widget. It seems that if I add the widget to the header widget container/controller, the default size is 360 pixels wide and 100% tall. I've removed it from there and added it to the "1" widget button in the WAB and now I can at least adjust the size of the widget's container window once it's open, but more importantly... How/where do I set the size of the widget's container when it opens?

Web AppBuilder Custom Widgets‌

[steveway]

In this case it sounds like you need to create a custom Panel.

Navigate to the Panel location (you should find this in your app's config.json) and make a copy of Panel.  Set the panel properties in your custom panel, then configure your widget to use the custom panel.

Hope this helps.

[FC_Basson]

As steve way says, you can use a custom panel CSS size class.  In "js/main.js" when the tool is created with toolbar.createTool(tool, panelClass), replace panelClass with your own custom class, which you also define in "css/styles.css".

So in main.js => var mytool = toolbar.createTool(tool, "myPanel")

and in styles.css => .myPanel{height:200px /*custom height*/}

[LanceGoens · Accepted solution]

You guys may have pin pointed the correct way to do it but I found an alternative and since I'm working on a prototype / proof of concept project, quick and dirty is what I'm after.

In the app's config.json file, I added the widget and placed a position node/element with it in the json. I'm guessing I may have actually stumbled onto the correct way to do this but I'm not sure. i haven't retested the widget in the header controller with this setup but I think those widgets are locked into the default panel size. Placing this widget in the "1" spot (near the home button) is sufficient for my need and actually preferable because I need to be able to move the window to interact with the map under it. Anyway, here is the code I added to config.json in the app root where the "width" and "height" control the panel the widget panel's size:

{

        "position": {

          "left": 55,

          "top": 45,

          "width": 650,

          "height": 500

        },

        "placeholderIndex": 1,

        "id": "_5",

        "positionRelativeTo": "map",

        "name": "SplicingSchedule",

        "label": "Splicing Schedule",

        "version": "1.1",

        "uri": "widgets/SplicingSchedule/Widget",

        "config": "widgets/SplicingSchedule/config.json"

      },