0

I am designing html button inside WebpageControl tag for tfs workitems, which is inside control tag. When it renders in Azure Devops page the default size of the box is bigger than that of the button control, unable to resize the control box. Is there any way to make border disappear or resize to fit the button control?

<Group Label="">             
               <Control Type="WebpageControl">
                 <WebpageControlOptions>
                  <Content> 
                     <![CDATA[<button><a target="_blank" onclick="window.open('/sample-form.html','name','width=313,height=371')"><b>Click Here To register</b></a></button>]]>
                   </Content> 
                </WebpageControlOptions> 
              </Control>              
</Group>

enter image description here

When I inspect element saw below div tag is rendered.

<div class="webpagecontrol" style="height: 201.979px;">
<iframe frameborder="0"></iframe>
</div>

This is happening only in case of <Control Type="WebpageControl"> tag other tags rendering without any borders/box.

Jay K
  • 41
  • 8

1 Answers1

0

Update:

We can try to set div's height. This can control the size of the border.

For example:

<div class="webpagecontrol" style="height: 100%;">
    <iframe id="frame" style="width:100%" frameborder="0"></iframe>
</div>

Here is a case with similar issue you can refer to.

For previous server version, we can use the Control element MinimumSize attribute to specify the minimum width and height that each form element should occupy. If you do not have sufficient vertical space, a scrollbar appears to keep its minimum size. Without this attribute, the controls are drawn by using their default sizes, unless controls in other tabs take more space that increases the size of the tab. You can use other attributes, such as Margin and Padding, to align or stretch the control and define the size of the border around the control.

MinimumSize: Specifies the minimum size, in pixels, that the control should occupy in the form. Two values are specified that correspond to the width and height. For example: (100,100).

For more information, please refer to Control the size of form elements.

Hugh Lin
  • 17,829
  • 2
  • 21
  • 25
  • Thank you for the answers. I checked the above links, we are looking for possibilities in Azure DevOps Server 2020 WebLayout form any suggestion how it can be achieved?. – Jay K Nov 13 '20 at 12:52
  • In this [document](https://learn.microsoft.com/en-us/azure/devops/reference/customize-wit-form?view=azure-devops-2020#layout-and-resizing), it says "The new web form resizes depending on the width available and the number of sections defined." – Hugh Lin Nov 18 '20 at 02:23