7 Replies Latest reply on Jun 23, 2010 4:05 AM by BhaskerChari

    Ellipsis ... show in tab of Tab navigator

    Shubhra Bhushan

      Hi guys,

      I'm using a TabNavigator component with static height, width and 3  static tabs. My problem is that the Tab navigator shows ellipsis in the  label of the first tab whereas it clearly looks that it does not lack  any space in tab width. how do i rectify it?

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" xmlns:local="*">
           <local:WLTabNavigator id="tn" x="83" y="60" width="210"  height="200" paddingBottom="0"
                            horizontalGap="1" tabHeight="18"  tabWidth="{tn.width/3}">
               <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
               </mx:Canvas>
               <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
               </mx:Canvas>
               <mx:Canvas label="Calls" fontFamily="Arial" fontSize="10">
               </mx:Canvas>
           </local:WLTabNavigator>
          
      </mx:WindowedApplication>

        • 1. Re: Ellipsis ... show in tab of Tab navigator
          BhaskerChari Level 4

          Hi Shubhra Bhushan,

           

           

          Try to set the truncateToFit property of TabNavigator to False.

           


          Thanks,

          Bhasker Chari

          • 2. Re: Ellipsis ... show in tab of Tab navigator
            Shubhra Bhushan Level 1

            Bhaskar, I did not find this property in TabNavigator!! Its not even in the private properties

            • 3. Re: Ellipsis ... show in tab of Tab navigator
              Peter deHaan Level 4

              I think this is working as designed. Your TabNavigator is 210px wide and with three tabs you're setting each tab to roughly 70px wide (give or take a pixel for gaps). If you don't set ANY tabWidth you can see that the first tab ("Contacts") wants to be about 78px, but you're only allowing 69-70px for the label, hence the truncation.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="horizontal">
              
                  <mx:TabNavigator id="tn1" width="210"  height="100"
                                   horizontalGap="1" tabHeight="18" tabWidth="69">
                      <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
                          <mx:Label id="lbl1" creationComplete="lbl1.text = tn1.getTabAt(0).width.toString();" />
                      </mx:Canvas>
                      <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
                      </mx:Canvas>
                      <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
                      </mx:Canvas>
                  </mx:TabNavigator>
              
                  <mx:TabNavigator id="tn2" width="210"  height="100"
                                   horizontalGap="1" tabHeight="18">
                      <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
                          <mx:Label id="lbl2" creationComplete="lbl2.text = tn2.getTabAt(0).width.toString();" />
                      </mx:Canvas>
                      <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
                      </mx:Canvas>
                      <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
                      </mx:Canvas>
                  </mx:TabNavigator>
              
              </mx:Application>
               
              

               

               

              I think a better approach is probably to set the TabNavigator container's internal TabBar to the same width of the TabNavigator and let the tabs resize themselves to fit. This may help get you started:

               

              <mx:TabNavigator id="tn3" width="210"  height="100" 
                               horizontalGap="1" tabHeight="18"
                               resize="event.currentTarget.mx_internal::getTabBar().width = event.currentTarget.width;">
                  <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
                      <mx:Label id="lbl3" creationComplete="lbl3.text = tn3.getTabAt(0).width.toString();" />
                  </mx:Canvas>
                  <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
                  </mx:Canvas>
                  <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
                  </mx:Canvas>
              </mx:TabNavigator>
              
              

               

               

              Or, since it looks like you are already subclassing TabNavigator, you could possibly move the logic into your subclass instead:

               

              package {
                  import mx.containers.TabNavigator;
                  import mx.events.ResizeEvent;
              
                  public class ResizerTabNavigator extends TabNavigator {
                      public function ResizerTabNavigator() {
                          super();
                          addEventListener(ResizeEvent.RESIZE, resizeEventListener);
                      }
              
                      protected function resizeEventListener(evt:ResizeEvent):void {
                          tabBar.width = this.width;
                      }
                  }
              }
              

               

              Hope that helps,

              Peter

              1 person found this helpful
              • 4. Re: Ellipsis ... show in tab of Tab navigator
                Shubhra Bhushan Level 1

                Thanks for the help Peter.

                But the client requirement is such that we have a TN of width 200px and 3 equal width tabs (width of each tab always will be {width of tn}/3). In this scenario the first label "Contacts" is not fitting into and the label shows "Cont...". Is it possible in any other way that the label shows in full? Maybe we can assign more width to the IUITextField component inside the Tab->Button class of the TabBar?

                • 5. Re: Ellipsis ... show in tab of Tab navigator
                  BhaskerChari Level 4

                  Hi Shubhra Bhushan,

                   

                  If you set the width of each tab always will be {width of tn}/3

                   

                  Then how if the Label length exceeds the tab width...

                   

                  You are asking that ....May be can we assign more width to the IUITextField component inside the Tab->Button class of the TabBar?

                   

                  But its not possible as of you try to increase the size of the label with the tab width staying the same..which is less than the label width...? How can it be possible to aceive that way..

                  Either you need to increase the tab width according to the label length...

                   

                  Thanks,

                  Bhasker Chari

                  • 6. Re: Ellipsis ... show in tab of Tab navigator
                    Shubhra Bhushan Level 1

                    Thanks Bhaskar. I understand your point. But i wanted to utilize the padding space around the label "Contacts" inside the tab. If you see a label on a tab then there are always some pixels on the left, right, top, bottom between the label and the tab boundaries. If I could somehow reduce that apdding then I'll get the label to show in full in the same width.

                    But i solve the issue with a hack which is:

                    I kept the following label on top of the first tab of the tab navigator and assigned "" string to the label of the Tab navigator's first tab and got the desired results. The constraints which I gave to the label ensured that on resizing the window to any size there was no GUI mishappening which could show that there is label on top of the TN's tab. so end result is smooth GUI feel :-)

                     

                                    <mx:Label top="{parentCanvas.height+1}" textAlign="center" text="Contacts" height="25"                              
                                                   buttonMode="false" click="tabNavigator.selectedIndex=0;" width="{tabNavigator.width/3}"/>                                      

                     

                    I chose label rather than linkbutton for this work because on resizing the window to a smaller width label gives default ellipsis like tab navigator's tabs which linkbutton does not.

                    • 7. Re: Ellipsis ... show in tab of Tab navigator
                      BhaskerChari Level 4

                      Good work Shubhra Bhushan any way it satisfied your need and client requirement too...

                       

                      Hacks are always there to screw it up...to get the desired solution..

                       

                      Happy coding..!!!

                       

                      Thanks,
                      Bhasker Chari