Why is the results moving down?

Question

I have an application with two states. One includes an input form and the other has the results of the computations of that data. I do a removechild for the input fields and an addchild to put in the results.
Somehow I'm getting a margin at the top of the results page. It is about 3/4" so it is very noticeable. Because (I'm guessing) I position to the first result field (a textInput that is not editable), the page positions with the above margin (or whatever is causing it) and half the top banner off the top of the page.
1) any ideas of how to isolate the problem?
2) any ideas of how to fix the problem?

Answer 1

This is the code, hopefully enough to show the problem.  Attached are two (poor color) gifs to show it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:DHSComp="components.*"
  initialize="setInitAccessible();"
  applicationComplete="setInitLanguage();"
  backgroundColor="#dedacf"
  layout="absolute"
  paddingLeft="5"
  paddingRight="5"
  height="100%"
  verticalScrollPolicy="on">
  <mx:states>
    <mx:State name="Result">
      <mx:RemoveChild target="{fsPageTitleNoticePanel}"/>
      <mx:RemoveChild target="{fsPageTitleNoticeVBox}"/>
      <mx:RemoveChild target="{householdInformationCanvas}"/>
      <mx:RemoveChild target="{householdInformationPanel}"/>
      <mx:RemoveChild target="{householdInformationVBox}"/>
      <mx:RemoveChild target="{incomeAndAssetsCanvas}"/>
      <mx:RemoveChild target="{incomeAndAssetsPanel}"/>
      <mx:RemoveChild target="{incomeAndAssetsVBox}"/>
      <mx:RemoveChild target="{expensesCanvas}"/>
      <mx:RemoveChild target="{expensesPanel}"/>
      <mx:RemoveChild target="{expensesVBox}"/>
      <mx:RemoveChild target="{standardUtilityAllowanceCanvas}"/>
      <mx:RemoveChild target="{standardUtilityAllowancePanel}"/>
      <mx:RemoveChild target="{standardUtilityAllowanceVBox}"/>
      <mx:RemoveChild target="{calculateButton}"/>
      <mx:RemoveChild target="{resetButton}"/>
      <mx:RemoveChild target="{accessibility}"/>
      <mx:RemoveChild target="{resultButton}" />
      <mx:AddChild relativeTo="{bodyFormHolder}" position="firstChild">
        <mx:VBox id="resultsPageBox"
            backgroundColor="#dedacf"
            width="100%"
            verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:Canvas id="rAccessibility"
                width="100%" >
                <mx:HBox id="rAccessHBox"
                    minWidth="640" width="100%"
                    x="0" y="0">
                    <mx:VBox id="rAccessSizeFontVBox"
                        width="160">
                        <mx:HBox id="rHSliderFontHBox"
                            width="100%">
                            <mx:HSlider
                                id="rSizeFontIndex"
                                labels="['0','1','2','3','4','5','6']"
                                toolTip=" "
                                liveDragging="true"
                                maximum="6"
                                snapInterval="1"
                                minimum="0"
                                change="changeFontSize();"
                                tickInterval="1"
                                showDataTip="true"
                                visible="true"
                                tickThickness="3"
                                width="100%"
                                tabIndex="10" />
                        </mx:HBox>
                        <mx:HBox id="rAccessSizeFontLabelHBox"
                            width="100%">
                            <mx:Label id="rAccessFontSizeLabel"
                                width="100%"
                                textAlign="center"
                                text=" " />
                        </mx:HBox>
                    </mx:VBox>
                    <mx:VBox id="rAccessContrastBoxLabel">
                        <mx:HBox id="rHSliderContrastHBox">
                            <mx:HSlider
                                id="rContrastIndex"
                                labels="['Normal','High']"
                                toolTip=" "
                                liveDragging="true"
                                maximum="1"
                                snapInterval="1"
                                minimum="0"
                                change="changeContrast();"
                                tickInterval="1"
                                showDataTip="true"
                                tickThickness="3"
                                width="1%"
                                tabIndex="15"/>
                        </mx:HBox>
                        <mx:HBox id="rAccessContrastHBox"
                            width="100%">
                            <mx:Label id="rAccessContrastLabel"
                                styleName="textNormal"
                                width="100%"
                                textAlign="center"
                                text=" " />
                        </mx:HBox>
                    </mx:VBox>
                    <mx:HBox id="rPageButtonBox"
                        horizontalAlign="right"
                        width="100%">
                        <mx:Button id="rLanguageSwitchButton"
                            label="{pageButtonLanguage}"
                            rollOverEffect="{glowButton}"
                            click="swapLanguage()"
                            toolTip=" "
                            tabIndex="5" />
                    </mx:HBox>
                </mx:HBox>
            </mx:Canvas>
<mx:VBox id="windowWorkspace"
    backgroundColor="#dedacf"
    height="100%"
    width="100%">
<!-- ********************************************************************** -->
<!-- ** header area ******************************************************* -->
    <DHSComp:DHSHeader id="headerComp"
        SNAPText="{pageSNAPText}" />
<!-- ********************************************************************** -->
<!-- ** start of the form area ******************************************** -->
  <mx:Canvas id="formHolder"
    minWidth="650"
    width="100%"
    backgroundColor="#dedacf">
    <mx:Text id="fsPageTitle"
        text="{pageTitleText}"
        styleName="pageTitle"
        width="100%"
        textAlign="center" />
    <mx:Form id="bodyFormHolder"
        minWidth="640"
        width="100%"
        y="33">
        <mx:Canvas id="accessibility"
            width="100%" >
            <mx:HBox id="accessHBox"
                minWidth="640" width="100%"
                x="0" y="0">
                <mx:VBox id="accessSizeFontVBox"
>
                    <mx:HBox id="hSliderFontHBox"
                        width="100%">
                        <mx:HSlider
                            id="sizeFontIndex"
                            liveDragging="true"
                            maximum="6"
                            snapInterval="1"
                            minimum="0"
                            labels="['0','1','2','3','4','5','6']"
                            toolTip=" "
                            change="changeFontSize();"
                            tickInterval="1"
                            showDataTip="true"
                            visible="true"
                            tickThickness="3"
                            width="100%"
                            tabIndex="10"/>
                    </mx:HBox>
                    <mx:HBox id="accessSizeFontLabelHBox"
                        width="100%">
                        <mx:Label id="accessFontSizeLabel"
                            width="100%"
                            textAlign="center"
                            text="Text Size" />
                    </mx:HBox>
                </mx:VBox>