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

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

Expand Messages
  • 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 1 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 2 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 3 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.