CODEWITHSUNDEEP
jsfjsf-2primefacestabstabview
Srikanth Ganji
Srikanth Ganji

Reputation: 1157

Scroll to the selected tab if the selected tab is hidden in p:tabview on initial tabview load

Assume that there are many tabs are there in p:tabview and scroll is being shown to navigate to all the tabs.

If the active tab whose contents are shown is the right most tab then it is not visible to the user on initial p:tabview load. If we navigate to the right most using scroll button then we could see the active tab highlighted indicating it is selected tab.

How to scroll to the active tab on load so that user able to see the selected tab always.

Upvotes: 1

Views: 966

Answers (1)

Srikanth Ganji
Srikanth Ganji

Reputation: 1157

This can be done in the following way by overriding initScrolling method in primefaces p:tabview component JavaScript file i.e. tabview.js file. 

  initScrolling: function() {
      if(this.jq.is(':visible')) {
          var overflown = (this.lastTab.position().left - this.firstTab.position().left) >                                               
                           this.navscroller.innerWidth();
          if(overflown) {
            this.navscroller.css('padding-left', '18px');
            this.navcrollerLeft.show();
            this.navcrollerRight.show();

            activeTab = this.navContainer.children('.ui-tabs-selected');
            viewportWidth = this.navscroller.innerWidth();
            activeTabPosition = activeTab.position().left + parseInt(activeTab.innerWidth());

            if(activeTabPosition > viewportWidth) {
              var scrollStep = activeTabPosition - viewportWidth;
              scrollStep = Math.ceil(scrollStep/100) * -100;        
              this.scroll(scrollStep);
            } else {
                   this.restoreScrollState();
            }                 
         }            
        return true;
    }
    else {
        return false;
    }
}

I would have wished to override this single method by extending tabview component widget but it is not supported. So we should have our own tabview.js file with the above method modified.

This is done in primefaces 4.0 version, more, or less the changes will be same higher versions also.

Upvotes: 1

Related Questions