How to resize VSTS dashboard widget

Question

I am building a VSTS team dashboard widget and I would like to display some custom html content; however the default widget size is very small and part of the html gets cut off. Refer to the following screenshot:

How can I resize the widget so that the widget is larger in area?

Note: I tried adding some CSS to the div of widget but that only changed the width that was "inside" the widget container, and thus it didn't make the widget outline bigger.

Answer 1

Widget size can be defined in manifest file like vss-extension.json.

Under vss-extension.json contributions oject, you can define the supportedSizes as a contribution's property. Such as below is a piece of the vss-extension.json file defined with multiple sizes:

{
        "id": "HelloWorldWidget3",
        "type": "ms.vss-dashboards-web.widget",
        "targets": [
            "ms.vss-dashboards-web.widget-catalog",
            ".HelloWorldWidget.Configuration"
        ],
        "properties": {
            "name": "Hello World Widget 3 (with config)",
            "description": "My third widget which supports configuration.",
            "catalogIconUrl": "img/helloWorld.png",
            "previewImageUrl": "img/helloWorld_330x160.png",
            "uri": "hello-world3.html",
          "supportedSizes": [
            {
              "rowSpan": 1,
              "columnSpan": 2
            },
            {
              "rowSpan": 2,
              "columnSpan": 2
            },
            {
              "rowSpan": 3,
              "columnSpan": 2
            },
            {
              "rowSpan": 4,
              "columnSpan": 2
            }
          ],
            "supportedScopes": [
                "project_team"
            ]
        }
}

More details, you can refer the example widget extension with Hello World Widget 3 (with config). And you can define more sizes under the supportedSizes (as above example).

Note: you also need to specify the configuration under the targets. As the ".HelloWorldWidget.Configuration" for above example.