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

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

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