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

Nested Layouts within Tabs - Issue with Extra White Space

Expand Messages
  • xbruty
    I have nested layouts within tabs. When viewing the last tab, everything is correct. But when viewing any previous tabs, there is a lot of extra white space
    Message 1 of 8 , Apr 28, 2009
    • 0 Attachment
      I have nested layouts within tabs. When viewing the last tab, everything is correct. But when viewing any previous tabs, there is a lot of extra white space underneath the TabView container and a scrollbar appears.


      Any thoughts on what the issue is and how to fix it?


      Here's the sample code with 2 tabs.

      <body class=" yui-skin-sam">
      <div id='demo'></div>
      </body>
      <script type="text/javascript">
      (function() {

      YAHOO.util.Event.onDOMReady(function() {
      var myTabs = new YAHOO.widget.TabView();

      myTabs.addTab( new YAHOO.widget.Tab({
      label: 'Tab One Label',
      content: '<div id="layout1"></div>',
      active: true
      }));

      myTabs.addTab( new YAHOO.widget.Tab({
      label: 'Tab Two Label',
      content: '<div id="layout2"></div>'
      }));

      myTabs.appendTo('demo');

      addLayout('1');
      addLayout('2');

      function addLayout(id) {
      layout = new YAHOO.widget.Layout(document.getElementById('layout'+id),{
      height: 600,
      width: 1200,
      units: [
      { position: 'right', header: 'Right '+id, body: 'Content', width: 900, resize: true, gutter: '2px 5px', collapse: false, scroll: true},
      { position: 'center'}
      ]
      });

      layout.on('render', function() {
      var el = layout.getUnitByPosition('center').get('wrap');
      var layout2 = new YAHOO.widget.Layout(el, {
      parent: layout,
      units: [
      { position: 'top', header: 'Top '+id, body: 'Content', height: 200, gutter: '2px' },
      { position: 'center', header: 'Center '+id, body: 'Content', gutter: '2px'}
      ]
      });

      layout2.render();
      });

      layout.render();
      }
      });
      })();
    • xbruty
      Any thoughts? It looks like a bug to me since the same issue happens even when I insert the simplest layout into two tabs like in the example below.
      Message 2 of 8 , Apr 29, 2009
      • 0 Attachment
        Any thoughts? It looks like a bug to me since the same issue happens even when I insert the simplest layout into two tabs like in the example below.


        <body class=" yui-skin-sam">
        <div id='demo'></div>
        </body>
        <script type="text/javascript">
        (function() {
        YAHOO.util.Event.onDOMReady(function() {
        var myTabs = new YAHOO.widget.TabView();

        myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab One Label',
        content: '<div id="layout1"></div>',
        active: true
        }));

        myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Two Label',
        content: '<div id="layout2"></div>'
        }));

        myTabs.appendTo('demo');

        addLayout(1);
        addLayout(2);

        function addLayout(id) {
        var layout = new YAHOO.widget.Layout(document.getElementById('layout'+id),{
        height: 600,
        width: 1200,
        units: [
        { position: 'center'}
        ]
        });

        layout.render();
        }
        });
        })();



        --- In ydn-javascript@yahoogroups.com, "xbruty" <lbruty@...> wrote:
        >
        > I have nested layouts within tabs. When viewing the last tab, everything is correct. But when viewing any previous tabs, there is a lot of extra white space underneath the TabView container and a scrollbar appears.
        >
        >
        > Any thoughts on what the issue is and how to fix it?
        >
        >
        > Here's the sample code with 2 tabs.
        >
        > <body class=" yui-skin-sam">
        > <div id='demo'></div>
        > </body>
        > <script type="text/javascript">
        > (function() {
        >
        > YAHOO.util.Event.onDOMReady(function() {
        > var myTabs = new YAHOO.widget.TabView();
        >
        > myTabs.addTab( new YAHOO.widget.Tab({
        > label: 'Tab One Label',
        > content: '<div id="layout1"></div>',
        > active: true
        > }));
        >
        > myTabs.addTab( new YAHOO.widget.Tab({
        > label: 'Tab Two Label',
        > content: '<div id="layout2"></div>'
        > }));
        >
        > myTabs.appendTo('demo');
        >
        > addLayout('1');
        > addLayout('2');
        >
        > function addLayout(id) {
        > layout = new YAHOO.widget.Layout(document.getElementById('layout'+id),{
        > height: 600,
        > width: 1200,
        > units: [
        > { position: 'right', header: 'Right '+id, body: 'Content', width: 900, resize: true, gutter: '2px 5px', collapse: false, scroll: true},
        > { position: 'center'}
        > ]
        > });
        >
        > layout.on('render', function() {
        > var el = layout.getUnitByPosition('center').get('wrap');
        > var layout2 = new YAHOO.widget.Layout(el, {
        > parent: layout,
        > units: [
        > { position: 'top', header: 'Top '+id, body: 'Content', height: 200, gutter: '2px' },
        > { position: 'center', header: 'Center '+id, body: 'Content', gutter: '2px'}
        > ]
        > });
        >
        > layout2.render();
        > });
        >
        > layout.render();
        > }
        > });
        > })();
        >
      • Eric Miraglia
        xbruty, I d strongly recommend providing a link to your example -- that makes it a lot easier for folks to poke around and see what s going on. -Eric
        Message 3 of 8 , Apr 29, 2009
        • 0 Attachment
          xbruty,

          I'd strongly recommend providing a link to your example -- that makes it a lot easier for folks to poke around and see what's going on.

          -Eric


          On Apr 29, 2009, at 8:46 AM, xbruty wrote:

          Any thoughts? It looks like a bug to me since the same issue happens even when I insert the simplest layout into two tabs like in the example below.

          <body class=" yui-skin-sam" >
          <div id='demo'></ div>
          </body>
          (function() {
          YAHOO.util.Event. onDOMReady( function( ) {
          var myTabs = new YAHOO.widget. TabView() ;

          myTabs.addTab( new YAHOO.widget. Tab({
          label: 'Tab One Label',
          content: '<div id="layout1" ></div>',
          active: true
          }));

          myTabs.addTab( new YAHOO.widget. Tab({
          label: 'Tab Two Label',
          content: '<div id="layout2" ></div>'
          }));

          myTabs.appendTo( 'demo');


          function addLayout(id) {
          var layout = new YAHOO.widget. Layout(document. getElementById( 'layout'+ id),{
          height: 600,
          width: 1200,
          units: [
          { position: 'center'}
          ]
          });

          layout.render( );
          }
          });
          })();

          --- In ydn-javascript@ yahoogroups. com, "xbruty" <lbruty@...> wrote:
          >
          > I have nested layouts within tabs. When viewing the last tab, everything is correct. But when viewing any previous tabs, there is a lot of extra white space underneath the TabView container and a scrollbar appears.
          >
          >
          > Any thoughts on what the issue is and how to fix it?
          >
          >
          > Here's the sample code with 2 tabs.
          >
          > <body class=" yui-skin-sam" >
          > <div id='demo'></ div>
          > </body>
          > <script type="text/javascri pt">
          > (function() {
          >
          > YAHOO.util.Event. onDOMReady( function( ) {
          > var myTabs = new YAHOO.widget. TabView() ;
          >
          > myTabs.addTab( new YAHOO.widget. Tab({
          > label: 'Tab One Label',
          > content: '<div id="layout1" ></div>',
          > active: true
          > }));
          >
          > myTabs.addTab( new YAHOO.widget. Tab({
          > label: 'Tab Two Label',
          > content: '<div id="layout2" ></div>'
          > }));
          >
          > myTabs.appendTo( 'demo');
          >
          > addLayout('1' );
          > addLayout('2' );
          >
          > function addLayout(id) {
          > layout = new YAHOO.widget. Layout(document. getElementById( 'layout'+ id),{
          > height: 600,
          > width: 1200,
          > units: [
          > { position: 'right', header: 'Right '+id, body: 'Content', width: 900, resize: true, gutter: '2px 5px', collapse: false, scroll: true},
          > { position: 'center'}
          > ]
          > });
          >
          > layout.on('render' , function() {
          > var el = layout.getUnitByPos ition('center' ).get('wrap' );
          > var layout2 = new YAHOO.widget. Layout(el, {
          > parent: layout,
          > units: [
          > { position: 'top', header: 'Top '+id, body: 'Content', height: 200, gutter: '2px' },
          > { position: 'center', header: 'Center '+id, body: 'Content', gutter: '2px'}
          > ]
          > });
          >
          > layout2.render( );
          > });
          >
          > layout.render( );
          > }
          > });
          > })();
          >


        • xbruty
          I m sorry but I can t upload the example to a server, but I uploaded the example file here. http://www.sendspace.com/file/bqe7uc
          Message 4 of 8 , Apr 30, 2009
          • 0 Attachment
            I'm sorry but I can't upload the example to a server, but I uploaded the example file here. http://www.sendspace.com/file/bqe7uc

            Here are two screen shots of what it looks like. http://i41.tinypic.com/dzjer9.jpg When viewing Tab One, a scroll bar appears on the right because there's a ton of extra white space at the bottom. When viewing Tab Two, it is not there even though both tabs have the exact same content and dimensions.


            --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
            >
            > xbruty,
            >
            > I'd strongly recommend providing a link to your example -- that makes
            > it a lot easier for folks to poke around and see what's going on.
            >
            > -Eric
            >
            >
            > On Apr 29, 2009, at 8:46 AM, xbruty wrote:
            >
            > >
            > >
            > > Any thoughts? It looks like a bug to me since the same issue happens
            > > even when I insert the simplest layout into two tabs like in the
            > > example below.
            > >
            > > <body class=" yui-skin-sam">
            > > <div id='demo'></div>
            > > </body>
            > > (function() {
            > > YAHOO.util.Event.onDOMReady(function() {
            > > var myTabs = new YAHOO.widget.TabView();
            > >
            > > myTabs.addTab( new YAHOO.widget.Tab({
            > > label: 'Tab One Label',
            > > content: '<div id="layout1"></div>',
            > > active: true
            > > }));
            > >
            > > myTabs.addTab( new YAHOO.widget.Tab({
            > > label: 'Tab Two Label',
            > > content: '<div id="layout2"></div>'
            > > }));
            > >
            > > myTabs.appendTo('demo');
            > >
            > >
            > > function addLayout(id) {
            > > var layout = new
            > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
            > > height: 600,
            > > width: 1200,
            > > units: [
            > > { position: 'center'}
            > > ]
            > > });
            > >
            > > layout.render();
            > > }
            > > });
            > > })();
            > >
            > > --- In ydn-javascript@yahoogroups.com, "xbruty" lbruty@ wrote:
            > > >
            > > > I have nested layouts within tabs. When viewing the last tab,
            > > everything is correct. But when viewing any previous tabs, there is
            > > a lot of extra white space underneath the TabView container and a
            > > scrollbar appears.
            > > >
            > > >
            > > > Any thoughts on what the issue is and how to fix it?
            > > >
            > > >
            > > > Here's the sample code with 2 tabs.
            > > >
            > > > <body class=" yui-skin-sam">
            > > > <div id='demo'></div>
            > > > </body>
            > > > <script type="text/javascript">
            > > > (function() {
            > > >
            > > > YAHOO.util.Event.onDOMReady(function() {
            > > > var myTabs = new YAHOO.widget.TabView();
            > > >
            > > > myTabs.addTab( new YAHOO.widget.Tab({
            > > > label: 'Tab One Label',
            > > > content: '<div id="layout1"></div>',
            > > > active: true
            > > > }));
            > > >
            > > > myTabs.addTab( new YAHOO.widget.Tab({
            > > > label: 'Tab Two Label',
            > > > content: '<div id="layout2"></div>'
            > > > }));
            > > >
            > > > myTabs.appendTo('demo');
            > > >
            > > > addLayout('1');
            > > > addLayout('2');
            > > >
            > > > function addLayout(id) {
            > > > layout = new
            > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
            > > > height: 600,
            > > > width: 1200,
            > > > units: [
            > > > { position: 'right', header: 'Right '+id, body: 'Content', width:
            > > 900, resize: true, gutter: '2px 5px', collapse: false, scroll: true},
            > > > { position: 'center'}
            > > > ]
            > > > });
            > > >
            > > > layout.on('render', function() {
            > > > var el = layout.getUnitByPosition('center').get('wrap');
            > > > var layout2 = new YAHOO.widget.Layout(el, {
            > > > parent: layout,
            > > > units: [
            > > > { position: 'top', header: 'Top '+id, body: 'Content', height:
            > > 200, gutter: '2px' },
            > > > { position: 'center', header: 'Center '+id, body: 'Content',
            > > gutter: '2px'}
            > > > ]
            > > > });
            > > >
            > > > layout2.render();
            > > > });
            > > >
            > > > layout.render();
            > > > }
            > > > });
            > > > })();
            > > >
            > >
            > >
            >
          • Dav Glass
            I think this thread has your answer: http://tech.groups.yahoo.com/group/ydn-javascript/message/47539 Dav
            Message 5 of 8 , Apr 30, 2009
            • 0 Attachment
              I think this thread has your answer:
              http://tech.groups.yahoo.com/group/ydn-javascript/message/47539

              Dav

              On Thu, 30 Apr 2009, xbruty wrote:

              > I'm sorry but I can't upload the example to a server, but I uploaded the
              > example file here. http://www.sendspace.com/file/bqe7uc
              > <http://www.sendspace.com/file/bqe7uc>
              >
              > Here are two screen shots of what it looks like.
              > http://i41.tinypic.com/dzjer9.jpg <http://i41.tinypic.com/dzjer9.jpg>
              > When viewing Tab One, a scroll bar appears on the right because there's
              > a ton of extra white space at the bottom. When viewing Tab Two, it is
              > not there even though both tabs have the exact same content and
              > dimensions.
              >
              >
              > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...>
              > wrote:
              > >
              > > xbruty,
              > >
              > > I'd strongly recommend providing a link to your example -- that makes
              > > it a lot easier for folks to poke around and see what's going on.
              > >
              > > -Eric
              > >
              > >
              > > On Apr 29, 2009, at 8:46 AM, xbruty wrote:
              > >
              > > >
              > > >
              > > > Any thoughts? It looks like a bug to me since the same issue happens
              > > > even when I insert the simplest layout into two tabs like in the
              > > > example below.
              > > >
              > > > <body class=" yui-skin-sam">
              > > > <div id='demo'></div>
              > > > </body>
              > > > (function() {
              > > > YAHOO.util.Event.onDOMReady(function() {
              > > > var myTabs = new YAHOO.widget.TabView();
              > > >
              > > > myTabs.addTab( new YAHOO.widget.Tab({
              > > > label: 'Tab One Label',
              > > > content: '<div id="layout1"></div>',
              > > > active: true
              > > > }));
              > > >
              > > > myTabs.addTab( new YAHOO.widget.Tab({
              > > > label: 'Tab Two Label',
              > > > content: '<div id="layout2"></div>'
              > > > }));
              > > >
              > > > myTabs.appendTo('demo');
              > > >
              > > >
              > > > function addLayout(id) {
              > > > var layout = new
              > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
              > > > height: 600,
              > > > width: 1200,
              > > > units: [
              > > > { position: 'center'}
              > > > ]
              > > > });
              > > >
              > > > layout.render();
              > > > }
              > > > });
              > > > })();
              > > >
              > > > --- In ydn-javascript@yahoogroups.com, "xbruty" lbruty@ wrote:
              > > > >
              > > > > I have nested layouts within tabs. When viewing the last tab,
              > > > everything is correct. But when viewing any previous tabs, there is
              > > > a lot of extra white space underneath the TabView container and a
              > > > scrollbar appears.
              > > > >
              > > > >
              > > > > Any thoughts on what the issue is and how to fix it?
              > > > >
              > > > >
              > > > > Here's the sample code with 2 tabs.
              > > > >
              > > > > <body class=" yui-skin-sam">
              > > > > <div id='demo'></div>
              > > > > </body>
              > > > > <script type="text/javascript">
              > > > > (function() {
              > > > >
              > > > > YAHOO.util.Event.onDOMReady(function() {
              > > > > var myTabs = new YAHOO.widget.TabView();
              > > > >
              > > > > myTabs.addTab( new YAHOO.widget.Tab({
              > > > > label: 'Tab One Label',
              > > > > content: '<div id="layout1"></div>',
              > > > > active: true
              > > > > }));
              > > > >
              > > > > myTabs.addTab( new YAHOO.widget.Tab({
              > > > > label: 'Tab Two Label',
              > > > > content: '<div id="layout2"></div>'
              > > > > }));
              > > > >
              > > > > myTabs.appendTo('demo');
              > > > >
              > > > > addLayout('1');
              > > > > addLayout('2');
              > > > >
              > > > > function addLayout(id) {
              > > > > layout = new
              > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
              > > > > height: 600,
              > > > > width: 1200,
              > > > > units: [
              > > > > { position: 'right', header: 'Right '+id, body: 'Content', width:
              > > > 900, resize: true, gutter: '2px 5px', collapse: false, scroll:
              > true},
              > > > > { position: 'center'}
              > > > > ]
              > > > > });
              > > > >
              > > > > layout.on('render', function() {
              > > > > var el = layout.getUnitByPosition('center').get('wrap');
              > > > > var layout2 = new YAHOO.widget.Layout(el, {
              > > > > parent: layout,
              > > > > units: [
              > > > > { position: 'top', header: 'Top '+id, body: 'Content', height:
              > > > 200, gutter: '2px' },
              > > > > { position: 'center', header: 'Center '+id, body: 'Content',
              > > > gutter: '2px'}
              > > > > ]
              > > > > });
              > > > >
              > > > > layout2.render();
              > > > > });
              > > > >
              > > > > layout.render();
              > > > > }
              > > > > });
              > > > > })();
              > > > >
              > > >
              > > >
              > >
              >
            • xbruty
              Thank you for the link, I didn t find it when I searched. The solution does solve the issue in the example I posted. However, in a more complicated example
              Message 6 of 8 , May 1, 2009
              • 0 Attachment
                Thank you for the link, I didn't find it when I searched.

                The solution does solve the issue in the example I posted. However, in a more complicated example with nested layouts all the headers (except for the headers in the first tab) disappear along with the extra space when I add the CSS to my page.


                --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
                >
                >
                > I think this thread has your answer:
                > http://tech.groups.yahoo.com/group/ydn-javascript/message/47539
                >
                > Dav
                >
                > On Thu, 30 Apr 2009, xbruty wrote:
                >
                > > I'm sorry but I can't upload the example to a server, but I uploaded the
                > > example file here. http://www.sendspace.com/file/bqe7uc
                > > <http://www.sendspace.com/file/bqe7uc>
                > >
                > > Here are two screen shots of what it looks like.
                > > http://i41.tinypic.com/dzjer9.jpg <http://i41.tinypic.com/dzjer9.jpg>
                > > When viewing Tab One, a scroll bar appears on the right because there's
                > > a ton of extra white space at the bottom. When viewing Tab Two, it is
                > > not there even though both tabs have the exact same content and
                > > dimensions.
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@>
                > > wrote:
                > > >
                > > > xbruty,
                > > >
                > > > I'd strongly recommend providing a link to your example -- that makes
                > > > it a lot easier for folks to poke around and see what's going on.
                > > >
                > > > -Eric
                > > >
                > > >
                > > > On Apr 29, 2009, at 8:46 AM, xbruty wrote:
                > > >
                > > > >
                > > > >
                > > > > Any thoughts? It looks like a bug to me since the same issue happens
                > > > > even when I insert the simplest layout into two tabs like in the
                > > > > example below.
                > > > >
                > > > > <body class=" yui-skin-sam">
                > > > > <div id='demo'></div>
                > > > > </body>
                > > > > (function() {
                > > > > YAHOO.util.Event.onDOMReady(function() {
                > > > > var myTabs = new YAHOO.widget.TabView();
                > > > >
                > > > > myTabs.addTab( new YAHOO.widget.Tab({
                > > > > label: 'Tab One Label',
                > > > > content: '<div id="layout1"></div>',
                > > > > active: true
                > > > > }));
                > > > >
                > > > > myTabs.addTab( new YAHOO.widget.Tab({
                > > > > label: 'Tab Two Label',
                > > > > content: '<div id="layout2"></div>'
                > > > > }));
                > > > >
                > > > > myTabs.appendTo('demo');
                > > > >
                > > > >
                > > > > function addLayout(id) {
                > > > > var layout = new
                > > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
                > > > > height: 600,
                > > > > width: 1200,
                > > > > units: [
                > > > > { position: 'center'}
                > > > > ]
                > > > > });
                > > > >
                > > > > layout.render();
                > > > > }
                > > > > });
                > > > > })();
                > > > >
                > > > > --- In ydn-javascript@yahoogroups.com, "xbruty" lbruty@ wrote:
                > > > > >
                > > > > > I have nested layouts within tabs. When viewing the last tab,
                > > > > everything is correct. But when viewing any previous tabs, there is
                > > > > a lot of extra white space underneath the TabView container and a
                > > > > scrollbar appears.
                > > > > >
                > > > > >
                > > > > > Any thoughts on what the issue is and how to fix it?
                > > > > >
                > > > > >
                > > > > > Here's the sample code with 2 tabs.
                > > > > >
                > > > > > <body class=" yui-skin-sam">
                > > > > > <div id='demo'></div>
                > > > > > </body>
                > > > > > <script type="text/javascript">
                > > > > > (function() {
                > > > > >
                > > > > > YAHOO.util.Event.onDOMReady(function() {
                > > > > > var myTabs = new YAHOO.widget.TabView();
                > > > > >
                > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                > > > > > label: 'Tab One Label',
                > > > > > content: '<div id="layout1"></div>',
                > > > > > active: true
                > > > > > }));
                > > > > >
                > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                > > > > > label: 'Tab Two Label',
                > > > > > content: '<div id="layout2"></div>'
                > > > > > }));
                > > > > >
                > > > > > myTabs.appendTo('demo');
                > > > > >
                > > > > > addLayout('1');
                > > > > > addLayout('2');
                > > > > >
                > > > > > function addLayout(id) {
                > > > > > layout = new
                > > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
                > > > > > height: 600,
                > > > > > width: 1200,
                > > > > > units: [
                > > > > > { position: 'right', header: 'Right '+id, body: 'Content', width:
                > > > > 900, resize: true, gutter: '2px 5px', collapse: false, scroll:
                > > true},
                > > > > > { position: 'center'}
                > > > > > ]
                > > > > > });
                > > > > >
                > > > > > layout.on('render', function() {
                > > > > > var el = layout.getUnitByPosition('center').get('wrap');
                > > > > > var layout2 = new YAHOO.widget.Layout(el, {
                > > > > > parent: layout,
                > > > > > units: [
                > > > > > { position: 'top', header: 'Top '+id, body: 'Content', height:
                > > > > 200, gutter: '2px' },
                > > > > > { position: 'center', header: 'Center '+id, body: 'Content',
                > > > > gutter: '2px'}
                > > > > > ]
                > > > > > });
                > > > > >
                > > > > > layout2.render();
                > > > > > });
                > > > > >
                > > > > > layout.render();
                > > > > > }
                > > > > > });
                > > > > > })();
                > > > > >
                > > > >
                > > > >
                > > >
                > >
                >
              • Dav Glass
                Then please post a link to the example you have an issue with. I answered that based on the example you provided ;) Dav
                Message 7 of 8 , May 1, 2009
                • 0 Attachment
                  Then please post a link to the example you have an issue with.

                  I answered that based on the example you provided ;)

                  Dav

                  On Fri, 01 May 2009, xbruty wrote:

                  > Thank you for the link, I didn't find it when I searched.
                  >
                  > The solution does solve the issue in the example I posted. However, in a more complicated example with nested layouts all the headers (except for the headers in the first tab) disappear along with the extra space when I add the CSS to my page.
                  >
                  >
                  > --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
                  > >
                  > >
                  > > I think this thread has your answer:
                  > > http://tech.groups.yahoo.com/group/ydn-javascript/message/47539
                  > >
                  > > Dav
                  > >
                  > > On Thu, 30 Apr 2009, xbruty wrote:
                  > >
                  > > > I'm sorry but I can't upload the example to a server, but I uploaded the
                  > > > example file here. http://www.sendspace.com/file/bqe7uc
                  > > > <http://www.sendspace.com/file/bqe7uc>
                  > > >
                  > > > Here are two screen shots of what it looks like.
                  > > > http://i41.tinypic.com/dzjer9.jpg <http://i41.tinypic.com/dzjer9.jpg>
                  > > > When viewing Tab One, a scroll bar appears on the right because there's
                  > > > a ton of extra white space at the bottom. When viewing Tab Two, it is
                  > > > not there even though both tabs have the exact same content and
                  > > > dimensions.
                  > > >
                  > > >
                  > > > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@>
                  > > > wrote:
                  > > > >
                  > > > > xbruty,
                  > > > >
                  > > > > I'd strongly recommend providing a link to your example -- that makes
                  > > > > it a lot easier for folks to poke around and see what's going on.
                  > > > >
                  > > > > -Eric
                  > > > >
                  > > > >
                  > > > > On Apr 29, 2009, at 8:46 AM, xbruty wrote:
                  > > > >
                  > > > > >
                  > > > > >
                  > > > > > Any thoughts? It looks like a bug to me since the same issue happens
                  > > > > > even when I insert the simplest layout into two tabs like in the
                  > > > > > example below.
                  > > > > >
                  > > > > > <body class=" yui-skin-sam">
                  > > > > > <div id='demo'></div>
                  > > > > > </body>
                  > > > > > (function() {
                  > > > > > YAHOO.util.Event.onDOMReady(function() {
                  > > > > > var myTabs = new YAHOO.widget.TabView();
                  > > > > >
                  > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                  > > > > > label: 'Tab One Label',
                  > > > > > content: '<div id="layout1"></div>',
                  > > > > > active: true
                  > > > > > }));
                  > > > > >
                  > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                  > > > > > label: 'Tab Two Label',
                  > > > > > content: '<div id="layout2"></div>'
                  > > > > > }));
                  > > > > >
                  > > > > > myTabs.appendTo('demo');
                  > > > > >
                  > > > > >
                  > > > > > function addLayout(id) {
                  > > > > > var layout = new
                  > > > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
                  > > > > > height: 600,
                  > > > > > width: 1200,
                  > > > > > units: [
                  > > > > > { position: 'center'}
                  > > > > > ]
                  > > > > > });
                  > > > > >
                  > > > > > layout.render();
                  > > > > > }
                  > > > > > });
                  > > > > > })();
                  > > > > >
                  > > > > > --- In ydn-javascript@yahoogroups.com, "xbruty" lbruty@ wrote:
                  > > > > > >
                  > > > > > > I have nested layouts within tabs. When viewing the last tab,
                  > > > > > everything is correct. But when viewing any previous tabs, there is
                  > > > > > a lot of extra white space underneath the TabView container and a
                  > > > > > scrollbar appears.
                  > > > > > >
                  > > > > > >
                  > > > > > > Any thoughts on what the issue is and how to fix it?
                  > > > > > >
                  > > > > > >
                  > > > > > > Here's the sample code with 2 tabs.
                  > > > > > >
                  > > > > > > <body class=" yui-skin-sam">
                  > > > > > > <div id='demo'></div>
                  > > > > > > </body>
                  > > > > > > <script type="text/javascript">
                  > > > > > > (function() {
                  > > > > > >
                  > > > > > > YAHOO.util.Event.onDOMReady(function() {
                  > > > > > > var myTabs = new YAHOO.widget.TabView();
                  > > > > > >
                  > > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                  > > > > > > label: 'Tab One Label',
                  > > > > > > content: '<div id="layout1"></div>',
                  > > > > > > active: true
                  > > > > > > }));
                  > > > > > >
                  > > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                  > > > > > > label: 'Tab Two Label',
                  > > > > > > content: '<div id="layout2"></div>'
                  > > > > > > }));
                  > > > > > >
                  > > > > > > myTabs.appendTo('demo');
                  > > > > > >
                  > > > > > > addLayout('1');
                  > > > > > > addLayout('2');
                  > > > > > >
                  > > > > > > function addLayout(id) {
                  > > > > > > layout = new
                  > > > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
                  > > > > > > height: 600,
                  > > > > > > width: 1200,
                  > > > > > > units: [
                  > > > > > > { position: 'right', header: 'Right '+id, body: 'Content', width:
                  > > > > > 900, resize: true, gutter: '2px 5px', collapse: false, scroll:
                  > > > true},
                  > > > > > > { position: 'center'}
                  > > > > > > ]
                  > > > > > > });
                  > > > > > >
                  > > > > > > layout.on('render', function() {
                  > > > > > > var el = layout.getUnitByPosition('center').get('wrap');
                  > > > > > > var layout2 = new YAHOO.widget.Layout(el, {
                  > > > > > > parent: layout,
                  > > > > > > units: [
                  > > > > > > { position: 'top', header: 'Top '+id, body: 'Content', height:
                  > > > > > 200, gutter: '2px' },
                  > > > > > > { position: 'center', header: 'Center '+id, body: 'Content',
                  > > > > > gutter: '2px'}
                  > > > > > > ]
                  > > > > > > });
                  > > > > > >
                  > > > > > > layout2.render();
                  > > > > > > });
                  > > > > > >
                  > > > > > > layout.render();
                  > > > > > > }
                  > > > > > > });
                  > > > > > > })();
                  > > > > > >
                  > > > > >
                  > > > > >
                  > > > >
                  > > >
                  > >
                  >
                  >
                • xbruty
                  Here s the example and a link to the full file. If the layout units are not given a body, the headers remain visible. If
                  Message 8 of 8 , May 5, 2009
                  • 0 Attachment
                    Here's the example and a link  to the full file.
                    If the layout units are not given a body, the headers remain visible. If the CSS is removed, the headers stay visible but there's extra space.

                    <style>
                    .yui-navset .yui-content .yui-hidden {
                        display: none;
                    }
                    </style>

                    <body class="yui-skin-sam">
                        <div id='demo'></div>
                    </body>

                    <script type="text/javascript">
                        (function() {
                        var Dom = YAHOO.util.Dom,
                            Event = YAHOO.util.Event,
                            layout = null,
                            resize = null;

                        Event.onDOMReady(function() {
                            var myTabs = new YAHOO.widget.TabView();
                            myTabs.addTab( new YAHOO.widget.Tab({
                                label: 'Tab One Label',
                                content: '<div id="layout1"></div>',
                                active: true
                            }));
                           
                            myTabs.addTab( new YAHOO.widget.Tab({
                                label: 'Tab Two Label',
                                content: '<div id="layout2"></div>'
                            }));
                           
                            myTabs.addTab( new YAHOO.widget.Tab({
                                label: 'Tab Three Label',
                                content: '<div id="layout3"></div>'
                            }));
                           
                            myTabs.appendTo('demo');
                           
                            addLayout('1');
                            addLayout('2');
                            addLayout('3');
                           
                            function addLayout(id) {
                               
                                layout = new YAHOO.widget.Layout(document.getElementById('layout'+id),{               
                                    height: 500,
                                    width: 1000,
                                    units: [
                                        { position: 'right', header: 'Right '+id, width: 700, resize: true, gutter: '2px 5px', collapse: false, body:'<p>Content</p>'},
                                        { position: 'center', header: 'Center '+id, body: '<p>Content</p>'}
                                    ]
                                });
                                layout.render();
                            }           
                        });
                    })();
                    </script>


                    --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
                    >
                    > Then please post a link to the example you have an issue with.
                    >
                    > I answered that based on the example you provided ;)
                    >
                    > Dav
                    >
                    > On Fri, 01 May 2009, xbruty wrote:
                    >
                    > > Thank you for the link, I didn't find it when I searched.
                    > >
                    > > The solution does solve the issue in the example I posted. However, in a more complicated example with nested layouts all the headers (except for the headers in the first tab) disappear along with the extra space when I add the CSS to my page.
                    > >
                    > >
                    > > --- In ydn-javascript@yahoogroups.com, Dav Glass davglass@ wrote:
                    > > >
                    > > >
                    > > > I think this thread has your answer:
                    > > > http://tech.groups.yahoo.com/group/ydn-javascript/message/47539
                    > > >
                    > > > Dav
                    > > >
                    > > > On Thu, 30 Apr 2009, xbruty wrote:
                    > > >
                    > > > > I'm sorry but I can't upload the example to a server, but I uploaded the
                    > > > > example file here. http://www.sendspace.com/file/bqe7uc
                    > > > > <http://www.sendspace.com/file/bqe7uc>
                    > > > >
                    > > > > Here are two screen shots of what it looks like.
                    > > > > http://i41.tinypic.com/dzjer9.jpg <http://i41.tinypic.com/dzjer9.jpg>
                    > > > > When viewing Tab One, a scroll bar appears on the right because there's
                    > > > > a ton of extra white space at the bottom. When viewing Tab Two, it is
                    > > > > not there even though both tabs have the exact same content and
                    > > > > dimensions.
                    > > > >
                    > > > >
                    > > > > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@>
                    > > > > wrote:
                    > > > > >
                    > > > > > xbruty,
                    > > > > >
                    > > > > > I'd strongly recommend providing a link to your example -- that makes
                    > > > > > it a lot easier for folks to poke around and see what's going on.
                    > > > > >
                    > > > > > -Eric
                    > > > > >
                    > > > > >
                    > > > > > On Apr 29, 2009, at 8:46 AM, xbruty wrote:
                    > > > > >
                    > > > > > >
                    > > > > > >
                    > > > > > > Any thoughts? It looks like a bug to me since the same issue happens
                    > > > > > > even when I insert the simplest layout into two tabs like in the
                    > > > > > > example below.
                    > > > > > >
                    > > > > > > <body class=" yui-skin-sam">
                    > > > > > > <div id='demo'></div>
                    > > > > > > </body>
                    > > > > > > (function() {
                    > > > > > > YAHOO.util.Event.onDOMReady(function() {
                    > > > > > > var myTabs = new YAHOO.widget.TabView();
                    > > > > > >
                    > > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                    > > > > > > label: 'Tab One Label',
                    > > > > > > content: '<div id="layout1"></div>',
                    > > > > > > active: true
                    > > > > > > }));
                    > > > > > >
                    > > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                    > > > > > > label: 'Tab Two Label',
                    > > > > > > content: '<div id="layout2"></div>'
                    > > > > > > }));
                    > > > > > >
                    > > > > > > myTabs.appendTo('demo');
                    > > > > > >
                    > > > > > >
                    > > > > > > function addLayout(id) {
                    > > > > > > var layout = new
                    > > > > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
                    > > > > > > height: 600,
                    > > > > > > width: 1200,
                    > > > > > > units: [
                    > > > > > > { position: 'center'}
                    > > > > > > ]
                    > > > > > > });
                    > > > > > >
                    > > > > > > layout.render();
                    > > > > > > }
                    > > > > > > });
                    > > > > > > })();
                    > > > > > >
                    > > > > > > --- In ydn-javascript@yahoogroups.com, "xbruty" lbruty@ wrote:
                    > > > > > > >
                    > > > > > > > I have nested layouts within tabs. When viewing the last tab,
                    > > > > > > everything is correct. But when viewing any previous tabs, there is
                    > > > > > > a lot of extra white space underneath the TabView container and a
                    > > > > > > scrollbar appears.
                    > > > > > > >
                    > > > > > > >
                    > > > > > > > Any thoughts on what the issue is and how to fix it?
                    > > > > > > >
                    > > > > > > >
                    > > > > > > > Here's the sample code with 2 tabs.
                    > > > > > > >
                    > > > > > > > <body class=" yui-skin-sam">
                    > > > > > > > <div id='demo'></div>
                    > > > > > > > </body>
                    > > > > > > > <script type="text/javascript">
                    > > > > > > > (function() {
                    > > > > > > >
                    > > > > > > > YAHOO.util.Event.onDOMReady(function() {
                    > > > > > > > var myTabs = new YAHOO.widget.TabView();
                    > > > > > > >
                    > > > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                    > > > > > > > label: 'Tab One Label',
                    > > > > > > > content: '<div id="layout1"></div>',
                    > > > > > > > active: true
                    > > > > > > > }));
                    > > > > > > >
                    > > > > > > > myTabs.addTab( new YAHOO.widget.Tab({
                    > > > > > > > label: 'Tab Two Label',
                    > > > > > > > content: '<div id="layout2"></div>'
                    > > > > > > > }));
                    > > > > > > >
                    > > > > > > > myTabs.appendTo('demo');
                    > > > > > > >
                    > > > > > > > addLayout('1');
                    > > > > > > > addLayout('2');
                    > > > > > > >
                    > > > > > > > function addLayout(id) {
                    > > > > > > > layout = new
                    > > > > > > YAHOO.widget.Layout(document.getElementById('layout'+id),{
                    > > > > > > > height: 600,
                    > > > > > > > width: 1200,
                    > > > > > > > units: [
                    > > > > > > > { position: 'right', header: 'Right '+id, body: 'Content', width:
                    > > > > > > 900, resize: true, gutter: '2px 5px', collapse: false, scroll:
                    > > > > true},
                    > > > > > > > { position: 'center'}
                    > > > > > > > ]
                    > > > > > > > });
                    > > > > > > >
                    > > > > > > > layout.on('render', function() {
                    > > > > > > > var el = layout.getUnitByPosition('center').get('wrap');
                    > > > > > > > var layout2 = new YAHOO.widget.Layout(el, {
                    > > > > > > > parent: layout,
                    > > > > > > > units: [
                    > > > > > > > { position: 'top', header: 'Top '+id, body: 'Content', height:
                    > > > > > > 200, gutter: '2px' },
                    > > > > > > > { position: 'center', header: 'Center '+id, body: 'Content',
                    > > > > > > gutter: '2px'}
                    > > > > > > > ]
                    > > > > > > > });
                    > > > > > > >
                    > > > > > > > layout2.render();
                    > > > > > > > });
                    > > > > > > >
                    > > > > > > > layout.render();
                    > > > > > > > }
                    > > > > > > > });
                    > > > > > > > })();
                    > > > > > > >
                    > > > > > >
                    > > > > > >
                    > > > > >
                    > > > >
                    > > >
                    > >
                    > >
                    >
                  Your message has been successfully submitted and would be delivered to recipients shortly.