6 Replies Latest reply on Apr 21, 2009 9:37 AM by Gregory Lafrance

    Padding Issues - help!

      Hi Everyone:) Would LOVE some help:

       

      I'm working on a tutorial App - which you can view here:

      http://www.hybrid7.com/dash/

       

       

      My problem is that for whatever reason when navigate through the different States the top and left padding move around. Can anyone tell me how to fix this? The book I'm reading doesnt address it.

       

      Here's the Code if it helps:

       

       

       

      -----

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

       

      <mx:ApplicationControlBar dock="true">
          <mx:LinkButton label="All"
              click="this.currentState=''"/>
          <mx:LinkButton label="Sales"
              click="this.currentState='fullSales'"/>
          <mx:LinkButton label="Categories"
              click="this.currentState='fullType'"/>
          <mx:LinkButton label="Comparison"
              click="this.currentState='fullComp'"/>
      </mx:ApplicationControlBar>

       

      <mx:states>
          <mx:State name="fullSales">
              <mx:SetProperty target="{rightCharts}"
              name="width" value="0"/>
              <mx:SetProperty target="{rightCharts}"
              name="height" value="0"/>
          </mx:State>
          <mx:State name="fullType">
              <mx:SetProperty target="{sales}"
              name="width" value="0"/>
              <mx:SetProperty target="{sales}"
              name="height" value="0"/>
              <mx:SetProperty target="{comp}"
              name="width" value="0"/>
              <mx:SetProperty target="{comp}"
              name="height" value="0"/>
          </mx:State>
          <mx:State name="fullComp">
              <mx:SetProperty target="{sales}"
              name="width" value="0"/>
              <mx:SetProperty target="{sales}"
              name="height" value="0"/>
              <mx:SetProperty target="{type}"
              name="width" value="0"/>
              <mx:SetProperty target="{type}"
              name="height" value="0"/>
          </mx:State>
      </mx:states>

       


      <mx:Panel id="sales"
          width="100%" height="100%"
          title="Sales Chart">   
          <mx:ControlBar>
          </mx:ControlBar>
      </mx:Panel>

       

      <mx:VBox id="rightCharts"
          width="100%" height="100%">
         
          <mx:Panel id="type"
          width="100%" height="100%"
          title="Category Chart">
          <mx:ControlBar>
          </mx:ControlBar>
          </mx:Panel>

       

          <mx:Panel id="comp"
          width="100%" height="100%"
          title="Comparison Chart">
          <mx:ControlBar>
          </mx:ControlBar>
          </mx:Panel>
         
      </mx:VBox>

       

      </mx:Application>

        • 1. Re: Padding Issues - help!
          Michael Borbor Level 4

          Hi there I think that the problem is that two Panels are inside a vbox so if

          I'm not wrong Flex automatically adds a 7px spacer between the controls, so

          even though you set to zero the width and height of one Panel, the other

          Panel inside your Vbox the 7px spacer is still there.

          • 2. Re: Padding Issues - help!
            Level 1

            ohhh ok - thats interesting. Do you know how I could fix it?

            Thanks!

            • 3. Re: Padding Issues - help!
              Michael Borbor Level 4

              My bad is an 8 px gap, I think you could work something out setting verticalGap and horizontalGap to 0, but maybe you need to change some other styles as well in order to eliminate all the gaps.

              • 4. Re: Padding Issues - help!
                Gregory Lafrance Level 6

                This is actually a great example of how NOT to use states. The following code solves the problem:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  layout="horizontal">
                  <mx:ApplicationControlBar dock="true">
                    <mx:LinkButton label="All" click="this.currentState=''"/>
                    <mx:LinkButton label="Sales" click="this.currentState='fullSales'"/>
                    <mx:LinkButton label="Categories" click="this.currentState='fullType'"/>
                    <mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/>
                  </mx:ApplicationControlBar>
                  <mx:states>
                    <mx:State name="fullSales">
                      <mx:RemoveChild target="{rightCharts}"/>
                    </mx:State>
                    <mx:State name="fullType">
                      <mx:RemoveChild target="{sales}"/>
                      <mx:RemoveChild target="{type}"/>
                      <mx:RemoveChild target="{rightCharts}"/>
                      <mx:AddChild target="{type}"/>
                    </mx:State>
                    <mx:State name="fullComp">
                      <mx:RemoveChild target="{sales}"/>
                      <mx:RemoveChild target="{comp}"/>
                      <mx:RemoveChild target="{rightCharts}"/>
                      <mx:AddChild target="{comp}"/>
                    </mx:State>
                  </mx:states>
                  <mx:Panel id="sales" width="100%" height="100%"
                    title="Sales Chart">   
                    <mx:ControlBar/>
                  </mx:Panel>
                  <mx:VBox id="rightCharts" width="100%" height="100%">
                    <mx:Panel id="type" width="100%" height="100%"
                      title="Category Chart">
                      <mx:ControlBar/>
                    </mx:Panel>
                    <mx:Panel id="comp" width="100%" height="100%"
                      title="Comparison Chart">
                      <mx:ControlBar/>
                    </mx:Panel>
                  </mx:VBox>
                </mx:Application>

                • 5. Re: Padding Issues - help!
                  Level 1

                  GENIUS! and much less code! THANK YOU!

                  • 6. Re: Padding Issues - help!
                    Gregory Lafrance Level 6

                    Not genius, mere curiosity...