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

Re: Nested Layouts within Tabs - Issue with Extra White Space

Expand Messages
  • 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 1 of 8 , Apr 30, 2009
      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 2 of 8 , Apr 30, 2009
        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 3 of 8 , May 1 9:58 AM
          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 4 of 8 , May 1 10:35 AM
            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 5 of 8 , May 5 9:18 AM
              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.