4 Replies Latest reply on Aug 24, 2010 11:28 PM by BhaskerChari

    TabNavigator Scrolling

    ShankarFlex3 Level 2

      Hi All,

       

      I have a TabNavigator in HBox --> Canvas -->TabNavigator, now when I keep adding tabs to the navigator the canvas doesn't come up with the horizontal scroll bar, as a result I am not able to see the tabs.

       

      Here is the code

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
         
              <mx:Canvas x="0" y="0" width="100%" height="100%" borderColor="#FFFFFF" id="canvas5">
                          <mx:ApplicationControlBar height="60" width="100%" fillAlphas="[1.0, 1.0]" fillColors="[#0066CC, #0066CC]" y="0" alpha="1.0">
                              <mx:LinkButton label="Home" height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold"  width="95" color="#FFFFFF"/>
                              <mx:LinkButton label="New Reservation" height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold" color="#FFFFFF" width="150"/>
                              <mx:LinkButton label="Search"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold" enabled="true" width="95" color="#FFFFFF" />
                              <mx:LinkButton label="Reports"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold"  enabled="false" width="95" color="#FFFFFF"/>
                              <mx:LinkButton label="Administration"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold" enabled="true" width="140" color="#FFFFFF" />
                              <mx:LinkButton label="Logout"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold"  width="95" color="#FFFFFF"/>
                              <mx:Spacer width="100%"/>                       
                          </mx:ApplicationControlBar>
                          <mx:HBox x="0" y="62" width="100%" height="100%"  fontSize="10">
                              <mx:Canvas width="70%" height="100%" id="adminHBoxId" horizontalScrollPolicy="auto" >
                                  <mx:TabNavigator  width="100%" height="{adminHBoxId.height-20}" fontSize="10" id="adminTabId" tabHeight="35" tabWidth="110"  >
                                      <mx:Canvas label="Activity Codes" width="100%" height="{ adminTabId.height}" id="activityTabId" fontSize="10" fontWeight="normal">
                                      </mx:Canvas>
                                      <mx:Canvas label="Categories" width="100%" height="{ adminTabId.height}" id="categoryTabId" fontSize="10">
                                      </mx:Canvas>
                                      <mx:Canvas label="    Clients    " width="100%" height="{ adminTabId.height}" id="clientTabId" fontSize="10">
                                      </mx:Canvas>
                                      <mx:Canvas label="   Contacts   " width="100%" height="{ adminTabId.height}" id="contactTabId" fontSize="10">
                                      </mx:Canvas>
                                      <mx:Canvas label="  Divisions   " width="100%" height="{ adminTabId.height}" id="divisionTabId" fontSize="10">
                                      </mx:Canvas>
                                      <mx:Canvas label="    Groups    " width="100%" height="{ adminTabId.height}" id="groupTabId" fontSize="10">
                                      </mx:Canvas>
                                      <mx:Canvas label="Job Types" width="100%" height="{ adminTabId.height}"  id="jobTypeTabId" fontSize="10">
                                      </mx:Canvas>
                                      <mx:Canvas label="Roles" width="100%" height="{ adminTabId.height}"  id="roleTabId" fontSize="10">
                                      </mx:Canvas>
                                      <mx:Canvas label="    Staff     " width="100%" height="{ adminTabId.height}" id="staffTabId" fontSize="10">
                                      </mx:Canvas>
                                  </mx:TabNavigator>
                              </mx:Canvas>
                              <mx:Canvas width="30%" height="100%" id="adminPanel" >
                                 
                              </mx:Canvas>
                          </mx:HBox>
                      </mx:Canvas>


      </mx:Application>

       

      What do I need to do get the scroll bar?

       

      Thanks,

      Shankar.

        • 1. Re: TabNavigator Scrolling
          Subeesh Arakkan Level 4

          Hi,

           

          Try removing width="100%" from TabNavigator

          • 2. Re: TabNavigator Scrolling
            Flex harUI Adobe Employee

            Try minWidth="0" on the TabNav, and check that horizontalScrollPolicy="auto"

            • 3. Re: TabNavigator Scrolling
              ShankarFlex3 Level 2

              By removing the width its working but leaving a big gap between the two Canvas in the HBox, I would like the TabNavigator to take the available width with browser resizing. Also setting minWidth="0" didn't help.

              • 4. Re: TabNavigator Scrolling
                BhaskerChari Level 4

                Hi Shankar,

                 

                 

                Actually here the problem is with the fixed width's that you have given to your LinkButtons.....

                 

                Remove the widths for the LinkButton first and the gap which you're talking in your Previous post is not the gap between the two Canvases in the

                 

                HBox but rather it is the gap you can see outside the HBox but in the main canvas....The problem here  with the gap you can see is because the

                 

                Application control bar width accounts for more width than the HBox width when you resize your Browser window and horizontal scroll appears for

                 

                your application window and your TabNav canvas as well...

                 

                Actually if you can eliminate the horizontal scroll for your app then you can see the functionality exactly you needed...So remove some of the Link Buttons

                 

                and then check you can observe the difference..

                 

                Check this code below..

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                   
                <mx:Canvas x="0" y="0" width="100%" height="100%" borderColor="#FFFFFF" id="canvas5">
                    <mx:ApplicationControlBar height="60" width="100%" fillAlphas="[1.0, 1.0]" fillColors="[#0066CC, #0066CC]" y="0" alpha="1.0">
                        <mx:LinkButton label="Home" height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold"  color="#FFFFFF"/>
                        <mx:LinkButton label="New Reservation" height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold" color="#FFFFFF"/>
                        <mx:LinkButton label="Search"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold" enabled="true" color="#FFFFFF" />
                        <mx:LinkButton label="Reports"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold"  enabled="false" color="#FFFFFF"/>
                        <mx:LinkButton label="Administration"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold" enabled="true"  color="#FFFFFF" />
                        <mx:LinkButton label="Logout"  height="30" fontFamily="Verdana" fontSize="11" fillColors="[#61A1CD, #E1ECF4]" fontWeight="bold" color="#FFFFFF"/>
                        <mx:Spacer width="100%"/>                       
                    </mx:ApplicationControlBar>
                    <mx:HBox x="0" y="62" width="100%" height="100%"  fontSize="10" horizontalGap="0">
                        <mx:Canvas width="70%" height="100%" id="adminHBoxId" horizontalScrollPolicy="auto" >
                            <mx:TabNavigator  height="{adminHBoxId.height-20}" fontSize="10" id="adminTabId" tabHeight="35" tabWidth="110"  >
                                <mx:Canvas label="Activity Codes" width="100%" height="{ adminTabId.height}" id="activityTabId" fontSize="10" fontWeight="normal">
                                </mx:Canvas>
                                <mx:Canvas label="Categories" width="100%" height="{ adminTabId.height}" id="categoryTabId" fontSize="10">
                                </mx:Canvas>
                                <mx:Canvas label="    Clients    " width="100%" height="{ adminTabId.height}" id="clientTabId" fontSize="10">
                                </mx:Canvas>
                                <mx:Canvas label="   Contacts   " width="100%" height="{ adminTabId.height}" id="contactTabId" fontSize="10">
                                </mx:Canvas>
                                <mx:Canvas label="  Divisions   " width="100%" height="{ adminTabId.height}" id="divisionTabId" fontSize="10">
                                </mx:Canvas>
                                <mx:Canvas label="    Groups    " width="100%" height="{ adminTabId.height}" id="groupTabId" fontSize="10">
                                </mx:Canvas>
                                <mx:Canvas label="Job Types" width="100%" height="{ adminTabId.height}"  id="jobTypeTabId" fontSize="10">
                                </mx:Canvas>
                                <mx:Canvas label="Roles" width="100%" height="{ adminTabId.height}"  id="roleTabId" fontSize="10">
                                </mx:Canvas>
                                <mx:Canvas label="    Staff     " width="100%" height="{ adminTabId.height}" id="staffTabId" fontSize="10">
                                </mx:Canvas>
                            </mx:TabNavigator>
                        </mx:Canvas>
                        <mx:Canvas width="30%" height="100%" id="adminPanel" backgroundColor="blue">
                           
                        </mx:Canvas>
                    </mx:HBox>
                </mx:Canvas>

                 


                </mx:Application>

                 

                Thanks,

                Bhasker

                1 person found this helpful