Re: wide tab content within layout does scroll horizontally

[dav.glass]

MC --

You need to give the wrapper for TabView a width..

TabView is a div, so it will fill up the width to the parent element. In your case, your tabview content is bigger than the Layout's center unit.

Add this CSS:

#demo {
     width: 1280px;
}

That should make the TabView wrapper 1280px wide and then you will see your scroll bars..

Dav

 Dav Glass
dav.glass@...
blog.davglass.com




+ Windows: n. - The most successful computer virus, ever. +
+ A computer without a Microsoft operating system is like a dog
without bricks tied to its head +
+ A Microsoft Certified Systems Engineer is to computing what a
McDonalds Certified Food Specialist is to fine cuisine  +



----- Original Message ----
From: mcorne <mcorne@...>
To: ydn-javascript@...
Sent: Thursday, July 3, 2008 12:53:50 PM
Subject: [ydn-javascript] wide tab content within layout does scroll horizontally

I am using the layout. I added a tabview in the center wireframe. A
tab content that is too wide, for example including a large image,
does not scroll horizontally. Is this a bug or a layout/tabview/CSS
settings problem? How do you fix that?
See the example at http://mcworks.ovh.org/page_layout_source2.html. I
simply mixed the layout and tabview examples.

Thanks,
MC


------------------------------------

Yahoo! Groups Links

[Michel Corne]

Thanks Dav, very interesting work around. It does work. However, the
tabs now moves with the rest of the content as you scroll (up or
down). I tried to put the tabs in the top wireframe and the content in
the center wireframe but mixing the tab div's and layout div's is
obviously not good! I tried adding div to enclose the actually content
and give it a width but the tabview width is the key here. None of
this work.
Is there a way to prevent the tabs to move as you scroll up or down?

MC

--- In ydn-javascript@..., Dav Glass <dav.glass@...> wrote:
>
> MC --
>
> You need to give the wrapper for TabView a width..
>
> TabView is a div, so it will fill up the width to the parent
element. In your case, your tabview content is bigger than the
Layout's center unit.
>
> Add this CSS:
>
> #demo {
>      width: 1280px;
> }
>
> That should make the TabView wrapper 1280px wide and then you will
see your scroll bars..

>
> Dav
>
>  Dav Glass
> dav.glass@...
> blog.davglass.com
>
>
>
>
> + Windows: n. - The most successful computer virus, ever. +
> + A computer without a Microsoft operating system is like a dog
> without bricks tied to its head +
> + A Microsoft Certified Systems Engineer is to computing what a
> McDonalds Certified Food Specialist is to fine cuisine  +
>
>
>
> ----- Original Message ----
> From: mcorne <mcorne@...>
> To: ydn-javascript@...
> Sent: Thursday, July 3, 2008 12:53:50 PM
> Subject: [ydn-javascript] wide tab content within layout does scroll

horizontally

>
> I am using the layout. I added a tabview in the center wireframe. A
> tab content that is too wide, for example including a large image,
> does not scroll horizontally. Is this a bug or a layout/tabview/CSS
> settings problem? How do you fix that?
> See the example at http://mcworks.ovh.org/page_layout_source2.html. I
> simply mixed the layout and tabview examples.
>
> Thanks,
> MC
>
>
> ------------------------------------
>
> Yahoo! Groups Links
>

[dav.glass]

MC --

In that case you will want to size the TabView instance to the same size as the layout unit.

Then place overflow auto on the main content div of the TabView (.yui-content)

Then size the content divs (.yui-content div) to be the max size the you want..

Does that make sense?
Dav

 Dav Glass
dav.glass@...
blog.davglass.com




+ Windows: n. - The most successful computer virus, ever. +
+ A computer without a Microsoft operating system is like a dog
without bricks tied to its head +
+ A Microsoft Certified Systems Engineer is to computing what a
McDonalds Certified Food Specialist is to fine cuisine  +



----- Original Message ----
From: mcorne <mcorne@...>
To: ydn-javascript@...
Sent: Friday, July 4, 2008 1:49:37 AM
Subject: [ydn-javascript] Re: wide tab content within layout does scroll horizontally

Thanks Dav, very interesting work around. It does work. However, the
tabs now moves with the rest of the content as you scroll (up or
down). I tried to put the tabs in the top wireframe and the content in
the center wireframe but mixing the tab div's and layout div's is
obviously not good! I tried adding div to enclose the actually content
and give it a width but the tabview width is the key here. None of
this work.
Is there a way to prevent the tabs to move as you scroll up or down?

MC

--- In ydn-javascript@..., Dav Glass <dav.glass@...> wrote:
>
> MC --
>
> You need to give the wrapper for TabView a width..
>
> TabView is a div, so it will fill up the width to the parent
element. In your case, your tabview content is bigger than the
Layout's center unit.
>
> Add this CSS:
>
> #demo {
>      width: 1280px;
> }
>
> That should make the TabView wrapper 1280px wide and then you will
see your scroll bars..

>
> Dav
>
>  Dav Glass
> dav.glass@...
> blog.davglass.com
>
>
>
>
> + Windows: n. - The most successful computer virus, ever. +
> + A computer without a Microsoft operating system is like a dog
> without bricks tied to its head +
> + A Microsoft Certified Systems Engineer is to computing what a
> McDonalds Certified Food Specialist is to fine cuisine  +
>
>
>
> ----- Original Message ----
> From: mcorne <mcorne@...>
> To: ydn-javascript@...
> Sent: Thursday, July 3, 2008 12:53:50 PM
> Subject: [ydn-javascript] wide tab content within layout does scroll

horizontally

>
> I am using the layout. I added a tabview in the center wireframe. A
> tab content that is too wide, for example including a large image,
> does not scroll horizontally. Is this a bug or a layout/tabview/CSS
> settings problem? How do you fix that?
> See the example at http://mcworks.ovh.org/page_layout_source2.html. I
> simply mixed the layout and tabview examples.
>
> Thanks,
> MC
>
>
> ------------------------------------
>
> Yahoo! Groups Links
>

------------------------------------

Yahoo! Groups Links

[Michel Corne]

Thanks for the tip. Finally got that to work. But the code really
seems like "cooking" to. Is it okay to do so? Btw, I did not manage to
get the actual offset of the content. I need to remove 11px to make it
fit within the layout. Any idea why?

the CSS
-------
.yui-layout .yui-layout-unit .yui-content {
    overflow: scroll;
    /* height could be set here or programaticaly */
}

the JS
------
    var resizeContent = function() {
        var center = layout.getUnitByPosition('center'),
        height = center.get('height'),
        contents = tabView.getElementsByClassName('yui-content'),
        content = new YAHOO.util.Element(contents[0]),
        offset = content.get('offsetTop');

        height -= offset + 11;

        content.setStyle('height', height + 'px');
    };
       
    layout.on('resize', resizeContent);
   
    resizeContent();

Demo at http://mcworks.ovh.org/page_layout_source-tabview.html .

Thanks,
MC

--- In ydn-javascript@..., Dav Glass <dav.glass@...> wrote:
>
> MC --
>
> In that case you will want to size the TabView instance to the same
size as the layout unit.
>
> Then place overflow auto on the main content div of the TabView
(.yui-content)
>
> Then size the content divs (.yui-content div) to be the max size the
you want..

>
> Does that make sense?
> Dav
>
>  Dav Glass
> dav.glass@...
> blog.davglass.com
>
>
>
>
> + Windows: n. - The most successful computer virus, ever. +
> + A computer without a Microsoft operating system is like a dog
> without bricks tied to its head +
> + A Microsoft Certified Systems Engineer is to computing what a
> McDonalds Certified Food Specialist is to fine cuisine  +
>
>
>
> ----- Original Message ----
> From: mcorne <mcorne@...>
> To: ydn-javascript@...
> Sent: Friday, July 4, 2008 1:49:37 AM
> Subject: [ydn-javascript] Re: wide tab content within layout does

scroll horizontally

>
> Thanks Dav, very interesting work around. It does work. However, the
> tabs now moves with the rest of the content as you scroll (up or
> down). I tried to put the tabs in the top wireframe and the content in
> the center wireframe but mixing the tab div's and layout div's is
> obviously not good! I tried adding div to enclose the actually content
> and give it a width but the tabview width is the key here. None of
> this work.
> Is there a way to prevent the tabs to move as you scroll up or down?
>
> MC
>
> --- In ydn-javascript@..., Dav Glass <dav.glass@> wrote:
> >
> > MC --
> >
> > You need to give the wrapper for TabView a width..
> >
> > TabView is a div, so it will fill up the width to the parent
> element. In your case, your tabview content is bigger than the
> Layout's center unit.
> >
> > Add this CSS:
> >
> > #demo {
> >      width: 1280px;
> > }
> >
> > That should make the TabView wrapper 1280px wide and then you will
> see your scroll bars..
> >
> > Dav
> >
> >  Dav Glass
> > dav.glass@
> > blog.davglass.com
> >
> >
> >
> >
> > + Windows: n. - The most successful computer virus, ever. +
> > + A computer without a Microsoft operating system is like a dog
> > without bricks tied to its head +
> > + A Microsoft Certified Systems Engineer is to computing what a
> > McDonalds Certified Food Specialist is to fine cuisine  +
> >
> >
> >
> > ----- Original Message ----
> > From: mcorne <mcorne@>
> > To: ydn-javascript@...
> > Sent: Thursday, July 3, 2008 12:53:50 PM
> > Subject: [ydn-javascript] wide tab content within layout does scroll
> horizontally
> >
> > I am using the layout. I added a tabview in the center wireframe. A
> > tab content that is too wide, for example including a large image,
> > does not scroll horizontally. Is this a bug or a layout/tabview/CSS
> > settings problem? How do you fix that?
> > See the example at http://mcworks.ovh.org/page_layout_source2.html. I
> > simply mixed the layout and tabview examples.
> >
> > Thanks,
> > MC
> >
> >
> > ------------------------------------
> >
> > Yahoo! Groups Links
> >
>
>
>
> ------------------------------------
>
> Yahoo! Groups Links
>