2 Replies Latest reply on Mar 3, 2010 10:37 AM by dman_80

    Customize tablabels

    dman_80

      I noticed it is possible to style all kinds of properties of a tabnavigator.

       

      But I couldn't find a way to customize the tab labels width margin. So I can descrease the space between the label and the tabborders a bit.

       

      Can someone tell me how to do this? This seems like a common property to style.

        • 1. Re: Customize tablabels
          Gregory Lafrance Level 6

          This gives you some control over the "padding", though there seems to be a minimum.

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Style>
              .myTabStyle1{
                paddingLeft: 0;
                paddingRight: 0;
                paddingTop: 0;
                paddingBottom: 0;
              }
              .myTabStyle2{
                paddingLeft: 20;
                paddingRight: 20;
                paddingTop: 20;
                paddingBottom: 20;
              }
            </mx:Style>
            <mx:HBox>
              <mx:Label text="0 padding: " fontSize="20"/>
              <mx:TabNavigator tabStyleName="myTabStyle1">
                <mx:VBox width="300" height="100" label="One"/>
                <mx:VBox width="300" height="100" label="Two"/>
                <mx:VBox width="300" height="100" label="Three"/>
              </mx:TabNavigator>
            </mx:HBox>
            <mx:Spacer height="50"/>
            <mx:HBox>
              <mx:Label text="20 padding: " fontSize="20"/>
              <mx:TabNavigator tabStyleName="myTabStyle2">
                <mx:VBox width="300" height="100" label="One"/>
                <mx:VBox width="300" height="100" label="Two"/>
                <mx:VBox width="300" height="100" label="Three"/>
              </mx:TabNavigator>
            </mx:HBox>
            <mx:Spacer height="50"/>
            <mx:HBox>
              <mx:Label text="default padding: " fontSize="20"/>
              <mx:TabNavigator>
                <mx:VBox width="300" height="100" label="One"/>
                <mx:VBox width="300" height="100" label="Two"/>
                <mx:VBox width="300" height="100" label="Three"/>
              </mx:TabNavigator>
            </mx:HBox>
          </mx:Application>
          

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          • 2. Re: Customize tablabels
            dman_80 Level 1

            Thanks but I solved it already using the Button paddingright and left styling properties. A Tab is a Button.

             

            Button {
               paddingLeft: 1;
               paddingRight: 1;
            }