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

Tab/TabView Height and Scrolling

Expand Messages
  • willyjstevens@ymail.com
    Hi, I m trying to figure out with a TabView and Tab to increase the height to be 100%. However only fixed heights (px) will increase. I ve tried adjusting the
    Message 1 of 2 , Jan 2, 2009
    • 0 Attachment
      Hi,

      I'm trying to figure out with a TabView and Tab to increase the height
      to be 100%. However only fixed heights (px) will increase. I've tried
      adjusting the yui-skin-sam file on the yui-content class but no luck.

      Ultimately I want to have the tab display:
      1) Always fully display within the container's height,
      2) Display an IFRAME, such that:
      3) Any content too large will at least display scrollable going down.

      By the way, I've tried using both the markup and scripting
      alternatives, no luck there on height or scrolling. Also am aware of
      the loading tab content from 'dataSrc' tab attribute but really need
      the iframe for scrolling and other applications reasons.

      Ideas graciously welcome.

      Many thanks,
      Will
    • lou_tribal
      I did something similar to that by computing the vertical space remaining for the tab content against the viewport height and the other elements present in the
      Message 2 of 2 , Jan 2, 2009
      • 0 Attachment
        I did something similar to that by computing the vertical space remaining for the tab content against the viewport height and the other elements present in the page.
        For example if you have a layout like:

        --------------------
        -   page header    -
        --------------------
        | tab |_____________
        |                   |
        |   tab content     |
        |                   |
        |___________________|

        The height of the tab content would be :

          h = (viewport height) - (page header height) - (tab height)

        For that I am using the following code:


        // get the tabe with my-tab the tab id.
        var tab = Dom.get("my-tab"),
        // get the content of the tabview
            content = Dom.getAncestorByClassName(tab, "yui-content"),
        // get the total vertical height of the screen
            vh = Dom.getViewportHeight(),
        // get the page header with myPageHeader its id
            pHeader = Dom.get("myPageHeader"),
        // Get the height of the page header
            phh = pHeader.offsetHeight,
        // Get the tabview first <UL> element
            th = Dom.getFirstChildBy(Dom.getAncestorByClassName(content, "yui-navset-top"),
              function(node){return (node.tagName==="UL")?true:false;}),
        // Get the height of the tabview header (the part that contains the tabs)
            thh = th.offsetHeight;
        // Compute the havailable height for the tab content, here 20 is the value I am removing // to take care of the margin etc in my page. You need to find your value.
        var H = vh - phh - thh - 20;
        // Sets the height to the content of the tabview
        Dom.setStyle(content, "height", H+"px");


        If you want that to be nicely displayed in a cross browser way you need to care of the padding/margin of each element as firefox and IE do not care about the padding/margin in the same way.

        &lt;



        --- In ydn-javascript@yahoogroups.com, "willyjstevens@..." <willyjstevens@...> wrote:
        >
        > Hi,
        >
        > I'm trying to figure out with a TabView and Tab to increase the height
        > to be 100%. However only fixed heights (px) will increase. I've tried
        > adjusting the yui-skin-sam file on the yui-content class but no luck.
        >
        > Ultimately I want to have the tab display:
        > 1) Always fully display within the container's height,
        > 2) Display an IFRAME, such that:
        > 3) Any content too large will at least display scrollable going down.
        >
        > By the way, I've tried using both the markup and scripting
        > alternatives, no luck there on height or scrolling. Also am aware of
        > the loading tab content from 'dataSrc' tab attribute but really need
        > the iframe for scrolling and other applications reasons.
        >
        > Ideas graciously welcome.
        >
        > Many thanks,
        > Will
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.