Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] TabView keeps height of the highest tab

Expand Messages
  • Matt Sweeney
    Hi Daniel, The simplest approach would be to set a height for the content area ( yui-content ) using CSS. I recommend doing this in EM units to allow for
    Message 1 of 2 , Dec 13, 2006
    • 0 Attachment
      Hi Daniel,

      The simplest approach would be to set a height for the content area ('yui-content') using CSS.  I recommend doing this in EM units to allow for text-scaling.

      If you'd rather have it set dynamically based on the height of the tallest tab, you can iterate over the tab "contentEl"s and set the height based on the tallest.

      Something like:
          var tabView = new YAHOO.widget.TabView('demo');
         
          tabView.on('contentReady', function() {
              var tabs = tabView.get('tabs');
              var height = tabView.get('activeTab').get('contentEl').offsetHeight; /* seed with visible tab */
            
              for (var i = 0, len = tabs.length; i < len; i++) {
                  if ( tabs[i] == tabView.get('activeTab') ) {
                      continue; /* skip active tab */
                  }
                
                  tabs[i].set('contentVisible', true); /* so we can measure */
                  height = Math.max(tabs[i].get('contentEl').offsetHeight, height);
                  tabs[i].set('contentVisible', false);
              }
            
              tabView.getElementsByClassName('yui-content')[0].style.height = height + 'px';
        
          });


      Keep in mind that fixing dimensions in pixels can cause layout issues when a user changes the browser text-size.

      This feature may become configurable in a future version of TabView.

      Matt

      Daniel Schmid wrote:
      Is it possible that all tabs keep the same height in a tabview
      
      I like that all tabs keept the height of the highest tab, thus that
      when you click on one tab it doesn't change the height of the tabview?
      
      Thanks, Daniel
      
      
      
       
      Yahoo! Groups Links
      
      <*> To visit your group on the web, go to:
          http://groups.yahoo.com/group/ydn-javascript/
      
      <*> Your email settings:
          Individual Email | Traditional
      
      <*> To change settings online go to:
          http://groups.yahoo.com/group/ydn-javascript/join
          (Yahoo! ID required)
      
      <*> To change settings via email:
          mailto:ydn-javascript-digest@yahoogroups.com 
          mailto:ydn-javascript-fullfeatured@yahoogroups.com
      
      <*> To unsubscribe from this group, send an email to:
          ydn-javascript-unsubscribe@yahoogroups.com
      
      <*> Your use of Yahoo! Groups is subject to:
          http://docs.yahoo.com/info/terms/
       
      
      
      
        

    Your message has been successfully submitted and would be delivered to recipients shortly.