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

Unable to set TabView height=100% in a layout unit, please help!

Expand Messages
  • aniad
    Hello, I have a nested layout with a bottom unit. When I create the layout I give the bottom unit explicit height. Subsequently I create a TabView in the
    Message 1 of 1 , Jun 25, 2009
    • 0 Attachment
      Hello,

      I have a nested layout with a bottom unit. When I create the layout I give the bottom unit explicit height. Subsequently I create a TabView in the bottom unit. I'd like the TabView to be 100% height, and subsequently all the tabs to take up 100% of available height.

      What seems to happen is that the div/iframe "overflow", and the height by which they "overflow" seems to be equivalent to the height of the row of tabs themselves, the div with class `yui-nav'. If you run the code below you will note that the bottom of the iframe's scroll bar is not visible, as it "overflows".

      PLEASE advise how to set this up so that the TabView's tabs can be specified with height of 100%. As you see I have tried various styles...

      Thank you,
      Ania.

      <style type="text/css">
      body {
      margin:0;
      padding:0;
      }
      .yui-layout-unit-bottom .yui-layout-wrap .yui-layout-bd
      {
      height: 100%;
      background-color: pink;
      }

      /* need this too: for tabs/details below we want to make sure content is 100%*/
      .yui-layout-unit-bottom .bottomDiv .yui-navset-top
      {
      height: 100%;
      }

      /* for tabs/details below we want to make sure content is 100%*/
      .yui-layout-unit-bottom .bottomDiv .yui-navset-top .yui-content
      {
      background-color: lime;
      height: 100%;
      padding: 0;
      }

      /* need this too: for tabs/details below we want to make sure content is 100%*/
      .yui-layout-unit-bottom .bottomDiv .yui-navset-top .yui-content div
      {
      height: 100%;
      background-color: fuchsia;
      }

      </style>

      <script>
      var layoutOutter;
      var layoutInner;
      var tabView;
      var defaultTabContent = "<div height='100%' id='tabDiv' style='height:100%;width:100%;background-color: orange;border: fuchsia thin solid;'><iframe src='http://www.yahoo.com' style='height:100%'></iframe></div>";
      var tabDef = { label: "SomeTab", content: defaultTabContent, active:true };

      function initLayout()
      {
      layoutOutter = new YAHOO.widget.Layout(
      {
      units: [
      { position: 'center', body: 'centerDiv', minWidth: 100 }
      ]
      });


      layoutOutter.on("render",layoutOutterRendered );
      layoutOutter.render();
      }

      function layoutOutterRendered()
      {
      var el = layoutOutter.getUnitByPosition('center').get('wrap');
      layoutInner = new YAHOO.widget.Layout(el,
      {
      parent: layoutOutter,
      width: layoutOutter.getSizes().center.w,
      height: layoutOutter.getSizes().center.h,
      units: [
      { position: 'center', body: 'centerDivToo', gutter: '2px', resize: false, minHeight: 200 },
      { position: 'bottom', resize: true, height: 500, body: 'bottomDiv', header: "foo", gutter: '2px', collapse: true, collapseSize: 20, scroll: false, useShim: true }
      ]
      });

      layoutInner.on("render",innerRendered );
      layoutInner.render();
      }

      function innerRendered()
      {
      tabView = new YAHOO.widget.TabView( );
      tabView.appendTo ( 'bottomDiv' );
      tabView.addTab ( new YAHOO.widget.Tab ( tabDef ) );
      }


      YAHOO.util.Event.onDOMReady(initLayout);


      </script>

      <body class="yui-skin-sam" style="overflow:auto">

      <div id="centerDivToo" style="height:100%;width:100%;zborder: aqua thin solid;"/>
      <div id="bottomDiv" class="bottomDiv" style="height:100%;border: yellow thin solid;"/>
      <div id="centerDiv" >center</div>

      </body>
      </html>
    Your message has been successfully submitted and would be delivered to recipients shortly.