How to use the larger widget configuration panel in an Azure DevOps extension
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(240, 54%, 33%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ES%3C/text%3E%3C/svg%3E)
SB
0
Reputation points
Hello everyone,
We want to build an extension for Azure Devops that adds some dashboard widgets, but we have encountered a technical limitation for which we kindly request your assistance.
Our extension provides several highly configurable widgets, and the default widget configuration panel in Azure DevOps is currently too small to accommodate the complexity of our setup options.
Here is an example of the default panel, that occurs in the Microsoft’s built-in Sprint Burndown widget.
We noticed that some of Microsoft’s built-in widgets, such as Burndown, use a larger configuration panel, which would perfectly suit our needs. Unfortunately, we were unable to find any documentation or API guidance on how to enable or implement this larger configuration area in custom widgets.
Could you please advise us on how to configure or enable this larger panel in our extension?
Thank you in advance!
Constantin.
Azure DevOps
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(236.8, 56.00000000000001%, 32%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EPK%3C/text%3E%3C/svg%3E)
Pashikanti Kumar 1,725 Reputation points Microsoft External Staff Moderator2025-10-28T20:25:10.2333333+00:00 Hi SB,
Thank you for posting your question in the Microsoft Q&A forum
Azure DevOps does not officially provide documented procedures or samples for enabling a large configuration panel for custom widgets. By default, size.
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(41.6, 77%, 14%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAC%3C/text%3E%3C/svg%3E)
Andrei C 0 Reputation points2025-10-30T09:00:42.27+00:00 .default-widget-config-panel-width { width:440px }
.wide-widget-config-panel-width { width: 575px }
This is in the ms.vss-dashboards.dashboards-config-host.min.cssHow can i force my config panel to open the configuration panel with the wide class instead of the default class?
-
SB 0 Reputation points
2025-10-30T14:12:54.5066667+00:00 Hi @Pashikanti Kumar ,
Thank you for your response.
We tested the solution you provided, but unfortunately it did not resolve the issue—the configuration panel remains the same small size.
It’s possible we may be missing something. Have you tested these steps on a sample app? If so, could you please share the sample app with us?
I appreciate your help.
Constantin
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(41.6, 65%, 14%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EPK%3C/text%3E%3C/svg%3E)
Pravallika KV 18,850 Reputation points Microsoft External Staff Moderator2025-11-05T01:57:42.23+00:00 Hi SB, Sorry to hear that the solution proposed wasn’t helpful. To understand better about the issue could you please check the private message and provide the requested details.
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(150.4, 23%, 24%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAR%3C/text%3E%3C/svg%3E)
Anurag Rohikar 3,190 Reputation points Microsoft External Staff Moderator2025-11-19T10:23:05.2566667+00:00 Hello SB,
Azure DevOps Services does not allow overriding default CSS or JavaScript for UI elements. Custom widgets and extensions inherit the default behavior, and panel resizing is not configurable.
I am checking with Azure DevOps engineering team further to reconfirm on the above same behavior. Thank you for your patience on this.
Sign in to comment
Sign in to answer