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

Re: [ydn-javascript] Re: Nested Layouts within Tabs - Issue with Extra White Space

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