4 Replies Latest reply on Nov 21, 2010 11:21 PM by Aman_SS

    Extra Pixel Between TabBar and ViewStack

    BRebey-SK7Aig

      I have a  TabBar inside an HBox, becuase I want to disply  other things to the left and right of  the TabBar.  I'm stacking the HBox  over a ViewStack buy putting  both in a  VBox, and setting the VBox "verticalGap"  to  "0".  It almost works as expected, but I get an extra pixel of "HBox" showing through between the TabBar and the ViewStack.  I've tried setting borders and padding to 0, but to no avail.

       

      Any  help  on how to get  rid of  the extra pixel, or info on where it's even coming from, would be much apprerciated.

       

      The folloing tiny application demonstrates the problem  (I know it's  ugly;   it's supposed to be so that it clearly  demonstrates  the problem):

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Style>
              TabBar.testTabBarStyle{backgroundColor: #FFCC00; tabStyleName: tabBarTab;}
              .tabBarTab{fillColors: #FF0000, #0000FF;}
          </mx:Style>
          <mx:VBox x="10" y="10" width="343" height="200" verticalGap="0" backgroundColor="#FF0096">
              <mx:HBox width="100%">
                  <mx:Label text="Stuff Above TabBar/ViewStack Control"/>
              </mx:HBox>
              <mx:HBox width="100%" backgroundColor="#00FF00" borderThickness="0" paddingBottom="0">
                  <mx:Label text="Stuff Left"/>
                  <mx:TabBar width="75%" dataProvider="viewstack1" styleName="testTabBarStyle" paddingBottom="0"/>
                  <mx:Label text="Stuff Right"/>
              </mx:HBox>
              <mx:ViewStack id="viewstack1" width="100%" height="80%" backgroundColor="#FFCC00">
                  <mx:Canvas label="Tab1" width="100%" height="100%">
                      <mx:Label text="Veiw1 - Annoying green pixel above --^"/>
                  </mx:Canvas>
                  <mx:Canvas label="Tab2" width="100%" height="100%">
                      <mx:Label text="Veiw2 - Annoying green pixel above --^"/>
                  </mx:Canvas>
                  <mx:Canvas label="Tab3" width="100%" height="100%">
                      <mx:Label text="Veiw3 - Annoying green pixel above --^"/>
                  </mx:Canvas>
              </mx:ViewStack>
              <mx:HBox width="100%">
                  <mx:Label text="Stuff Below  TabBar/ViewStack Control"/>
              </mx:HBox>
          </mx:VBox>
      </mx:Application>

        • 1. Re: Extra Pixel Between TabBar and ViewStack
          saisri2k2 Level 4

          did you try to make the verticalGap =0 for all the containers?

          • 2. Re: Extra Pixel Between TabBar and ViewStack
            Aman_SS

            Hi

                 This will solve your issue for sure!

             

                <?xml version="1.0" encoding="utf-8"?>

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                <mx:Style>

                    TabBar.testTabBarStyle{backgroundColor: #FFCC00; tabStyleName: tabBarTab;}

                    .tabBarTab{fillColors: #FF0000, #0000FF;}

                </mx:Style>

                <mx:VBox x="10" y="10" width="343" height="200" verticalGap="-1" backgroundColor="#FF0096">

                    <mx:HBox width="100%">

                        <mx:Label text="Stuff Above TabBar/ViewStack Control"/>

                    </mx:HBox>

                    <mx:HBox width="100%" backgroundColor="#00FF00" borderThickness="0" paddingBottom="0">

                        <mx:Label text="Stuff Left"/>

                        <mx:TabBar width="75%" dataProvider="viewstack1" styleName="testTabBarStyle" bottom="none" paddingBottom="0"/>

                        <mx:Label text="Stuff Right"/>

                    </mx:HBox>

                    <mx:ViewStack id="viewstack1" width="100%" height="80%" backgroundColor="#FFCC00">

                        <mx:Canvas label="Tab1" width="100%" height="100%">

                            <mx:Label text="Veiw1 - Annoying green pixel above --^"/>

                        </mx:Canvas>

                        <mx:Canvas label="Tab2" width="100%" height="100%">

                            <mx:Label text="Veiw2 - Annoying green pixel above --^"/>

                        </mx:Canvas>

                        <mx:Canvas label="Tab3" width="100%" height="100%">

                            <mx:Label text="Veiw3 - Annoying green pixel above --^"/>

                        </mx:Canvas>

                    </mx:ViewStack>

                    <mx:HBox width="100%">

                        <mx:Label text="Stuff Below  TabBar/ViewStack Control"/>

                    </mx:HBox>

                </mx:VBox>

            </mx:Application>

             

             

             

            Thanks!

            Happy Coding!

            • 3. Re: Extra Pixel Between TabBar and ViewStack
              BhaskerChari Level 4

              Hi Aman,

               

              I don't think that will resolve the issue and also for the bottom we need to specify an integer which is in pixels we should not specify string ..none.

               

              The issue will be resolved simply by setting the VBox vertigalGap to negative value...vertigalGap="-2"

               

               

              Thanks,

              Bhasker

              • 4. Re: Extra Pixel Between TabBar and ViewStack
                Aman_SS Level 1

                hi bhaskerChari

                                         thats what i did, verticalGap= -1; and that solves the issue.. Nothing else

                 

                Thanks!!