UI issue in TFS custom work item

Question

We created new TFS work item. After some time, we began to have issues with controls UI layout. (Screen shot is attached as an example). Spaces between controls are VERY big. If we re-run the query - everything becomes good. After another re-run, the layout again becomes corrupted.

The UI Layout is modified in the way as suggested with this answer: Is it possible to customize "History" tab for Bug/Task work item types?.

What is a reason of that and how to fix it?!

EDITED: layout was added

<FORM>
  <Layout>
    <Group Label="General" Margin="(1,1,1,1)">
      <Column FixedWidth="100">
        <Control FieldName="Custom.IssueType" Type="FieldControl" Label="Issue Type:" LabelPosition="Left" />
        <Control FieldName="Custom.Priority" Type="FieldControl" Label="Priorit&amp;y:" LabelPosition="Left" />
      </Column>
      <Column PercentWidth="100">
        <Group Margin="(2,2,2,2)">
          <Column PercentWidth="100">
            <Control FieldName="System.Title" Type="FieldControl" Label="&amp;Title:" LabelPosition="Left" />
          </Column>
        </Group>
        <Group Margin="(2,2,2,2)">
          <Column PercentWidth="50">
            <Control FieldName="System.AreaPath" Type="WorkItemClassificationControl" Label="&amp;Area:" LabelPosition="Left" />
          </Column>
          <Column PercentWidth="50">
            <Control FieldName="System.IterationPath" Type="WorkItemClassificationControl" Label="&amp;Iteration:" LabelPosition="Left" />
          </Column>
        </Group>
      </Column>
    </Group>
    <Group Margin="(1,1,1,1)">
      <Column PercentWidth="70">
        <Group Label="Status" Margin="(1,1,1,1)">
          <Column PercentWidth="50">
            <Control FieldName="System.State" Type="FieldControl" Label="&amp;State:" LabelPosition="Left" />
            <Control FieldName="System.AssignedTo" Type="FieldControl" Label="Assi&amp;gned to:" LabelPosition="Left" />
          </Column>
          <Column PercentWidth="50">
            <Control FieldName="System.Reason" Type="FieldControl" Label="&amp;Reason:" LabelPosition="Left" />
            <Control FieldName="Custom.CustomerIssue" Type="FieldControl" Label="&amp;Customer Issue:" LabelPosition="Left" />
          </Column>
        </Group>
      </Column>
      <Column FixedWidth="400">
        <Group Label="Details" Margin="(1,1,1,1)">
          <Column PercentWidth="50">
            <Control FieldName="Custom.FoundInBuild" Type="FieldControl" Label="&amp;Found in build:" LabelPosition="Left" />
            <Control FieldName="Custom.ResolvedInBuild" Type="FieldControl" Label="Resolved in &amp;build:" LabelPosition="Left" />
          </Column>
          <Column PercentWidth="50">
            <Control FieldName="Custom.HelpAuthoring" Type="FieldControl" Label="Help Authoring:" LabelPosition="Left" />
            <Control FieldName="Custom.RankInt" Type="FieldControl" Label="Ran&amp;k:" LabelPosition="Left" NumberFormat="WholeNumbers" MaxLength="10" />
          </Column>
        </Group>
      </Column>
    </Group>
    <TabGroup Margin="(1,1,1,1)">
      <Tab Label="Content">
        <Group>
          <Column PercentWidth="50">
            <Control FieldName="System.Description" Type="HtmlFieldControl" Label="Des&amp;cription:" LabelPosition="Top" Dock="Fill" />
          </Column>
          <Column PercentWidth="50">
            <Control FieldName="System.History" Type="WorkItemLogControl" Label="&amp;History:" LabelPosition="Top" Dock="Fill" />
          </Column>
        </Group>
      </Tab>
      <Tab Label="Links">
        <Control Type="LinksControl" LabelPosition="Top" />
      </Tab>
      <Tab Label="File Attachments">
        <Control Type="AttachmentsControl" LabelPosition="Top" />
      </Tab>
      <Tab Label="Misc.">
        <Group>
          <Column PercentWidth="50">
            <Group Label="">
              <Column PercentWidth="50">
                <Group Label="Estimated Time">
                  <Column PercentWidth="100">
                    <Control FieldName="Custom.EstimatedTimeTotal" Type="FieldControl" Label="Total:" LabelPosition="Left" />
                    <Control FieldName="Custom.EstimatedTimeLeft" Type="FieldControl" Label="Left:" LabelPosition="Left" />
                  </Column>
                </Group>
              </Column>
              <Column PercentWidth="50">
                <Group Label="Other">
                  <Column PercentWidth="100">
                    <Control FieldName="Custom.Localization" Type="FieldControl" Label="Localization:" LabelPosition="Left" />
                    <Control FieldName="Custom.Rebrand" Type="FieldControl" Label="Rebrand:" LabelPosition="Left" />
                  </Column>
                </Group>
              </Column>
            </Group>
          </Column>
        </Group>
      </Tab>
    </TabGroup>
  </Layout>
</FORM>

Answer 1

The one thing that comes to mind is in your FORM section of your Work Item definition XML, make sure that the Column sizes are set. We use PercentWidth="50" on the columns where we have description and history. I did note that we had a similar problem to what you had when I had neglected to set that.

If you're seeing this happen only on specific work items, it is probably related to size of data, or presence of data. Once you post the FORM section from the WorkItem, it will be easier to tell.

-- EDIT --

Looking at your FORM section shows a lot of mixing of FixedWidth and PercentWidth. I've noticed that this can really cause the display to get confused.

For Example, in your first Group (General), you have one column set to a fixed width of 100, and a second column set to a percentage width of 100%. Try setting each of these to PercentWidth="50".

Similar to your second group, where your first column (which contains the "Status" group) is set to 70% width, and the second column is set to a fixed width of 400.

I've noticed that the form renderer tends to have problems when these layout types are mixed.