You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Stephen Friedrich <tr...@eekboom.com> on 2007/08/10 20:57:38 UTC

panelBorderLayout problem: start/end cannot have 100% height

I used a panelBorderLayout to layout my page.
The left facet contains a panelBox for navigation.
Unfortunately the rendering of panelBorderLayout makes it very hard
to have my navigation panelBox 100% height (which is a client requirement).
panelBorderLayout puts the "left" facet in a <td>, but that cell does
not have 100% set.
Therefore setting the cell's content (my panelBox) to height:100%
has no effect at all.

Heavy usage of firebug resulted in a solution, but that is hacky and only
works in firefox:
Set a style class: <tr:panelBorderLayout styleClass="myPanelBorder">
Use child selectors to modify the td height:
	.myPanelBorder > tbody > tr > td {
		height: 100%;
	}

Isn't that ugly.
Two possible soltuions:
- Change the panelBorderLayout render, so that it always gives the td's
height:100%. I don't see any disadvantages in that. The child (facet)
is then free to use that height or not.

- Make the panelBorderLayout skinnable.

What do you think?

Re: panelBorderLayout problem: start/end cannot have 100% height

Posted by Stephen Friedrich <tr...@eekboom.com>.
frames? That's a little too 90s isn't it (and is rightfully forbidden
in my client's style guidelines)?

But right it shouldn't be too difficult to create a facelets component.
Up to now I have only advaned to the templating section in my copy of
O'Reilly's Facelets Short Cuts.
I'll read the next chapters...

Daniel Niklas wrote:
> Hi,
> 
> perhaps frameBorderLayout is the component you are searching for:
> http://www.irian.at/trinidad-demo/faces/components/html/frameBorderLayout.jspx
> 
> Daniel


Re: panelBorderLayout problem: start/end cannot have 100% height

Posted by Daniel Niklas <da...@continentale.de>.
Hi,

perhaps frameBorderLayout is the component you are searching for:
http://www.irian.at/trinidad-demo/faces/components/html/frameBorderLayout.jspx

Daniel
-- 
View this message in context: http://www.nabble.com/panelBorderLayout-problem%3A-start-end-cannot-have-100--height-tf4250497.html#a12104446
Sent from the MyFaces - Users mailing list archive at Nabble.com.


Re: panelBorderLayout problem: start/end cannot have 100% height

Posted by Daniel Niklas <da...@continentale.de>.
Hi,

i have the same requirements, too. Making the panelBorderLayout skinnible,
ist perhaps the best solution. In Orcale adffaces 11 is another component,
it's callend panelStretchLayout.
(http://www.oracle.com/technology/products/adf/adffaces/11/doc/multiproject/adf-richclient-api/enhanced-tagdoc.html)
Because this is not available, i decided to make my own panelStretchLayout
(facelets) component.

Greetings
Daniel
-- 
View this message in context: http://www.nabble.com/panelBorderLayout-problem%3A-start-end-cannot-have-100--height-tf4250497.html#a12104378
Sent from the MyFaces - Users mailing list archive at Nabble.com.


Re: panelBorderLayout problem: start/end cannot have 100% height

Posted by Stephen Friedrich <tr...@eekboom.com>.
Yup, I already tried that - no luck.
As long as the td's themselves don't have height:100% their contents
will not be able to have 100% height either.
(Besides I don't want the outer table to have 100% of _its_ parent height.
That table should simply be as high as the largest contained facet.)

I really think it would hurt nobody if the cell tags would have 100% by default.
But I would be happy with the selectors, also.
Maybe that could be useful for other use cases, also.

Simon Lessard wrote:
> I thought a bit more about this and I think you can already achieve it 
> without that big selector of yours. Have you tried the following?
> 
> af|panelBorderLayout
> {
>   height: 100%;
>   min-height: 100%;
> }


Re: panelBorderLayout problem: start/end cannot have 100% height

Posted by Simon Lessard <si...@gmail.com>.
I thought a bit more about this and I think you can already achieve it
without that big selector of yours. Have you tried the following?

af|panelBorderLayout
{
  height: 100%;
  min-height: 100%;
}

This should make the outer table big enough ans the cells inside should
stretch accordingly, note that I did not test it though.


Regards,

~ Simon

On 8/10/07, Simon Lessard <si...@gmail.com> wrote:
>
> Nvm that, I misunderstood your requirement...
>
> Maybe we should add selectors like af|panelBorderLayout::start-block,
> af|panelBorderLayout::inner-start-block, etc.
>
>
> Regards,
>
> ~ Simon
>
> On 8/10/07, Simon Lessard <si...@gmail.com> wrote:
> >
> > Hello Stephen,
> >
> > Have you tried innerStart facet as well by any chance?
> >
> > On 8/10/07, Stephen Friedrich <trinidad@eekboom.com > wrote:
> > >
> > > I used a panelBorderLayout to layout my page.
> > > The left facet contains a panelBox for navigation.
> > > Unfortunately the rendering of panelBorderLayout makes it very hard
> > > to have my navigation panelBox 100% height (which is a client
> > > requirement).
> > > panelBorderLayout puts the "left" facet in a <td>, but that cell does
> > > not have 100% set.
> > > Therefore setting the cell's content (my panelBox) to height:100%
> > > has no effect at all.
> > >
> > > Heavy usage of firebug resulted in a solution, but that is hacky and
> > > only
> > > works in firefox:
> > > Set a style class: <tr:panelBorderLayout styleClass="myPanelBorder">
> > > Use child selectors to modify the td height:
> > >         .myPanelBorder > tbody > tr > td {
> > >                 height: 100%;
> > >         }
> > >
> > > Isn't that ugly.
> > > Two possible soltuions:
> > > - Change the panelBorderLayout render, so that it always gives the
> > > td's
> > > height:100%. I don't see any disadvantages in that. The child (facet)
> > > is then free to use that height or not.
> > >
> > > - Make the panelBorderLayout skinnable.
> > >
> > > What do you think?
> > >
> >
> >
>

Re: panelBorderLayout problem: start/end cannot have 100% height

Posted by Simon Lessard <si...@gmail.com>.
Nvm that, I misunderstood your requirement...

Maybe we should add selectors like af|panelBorderLayout::start-block,
af|panelBorderLayout::inner-start-block, etc.


Regards,

~ Simon

On 8/10/07, Simon Lessard <si...@gmail.com> wrote:
>
> Hello Stephen,
>
> Have you tried innerStart facet as well by any chance?
>
> On 8/10/07, Stephen Friedrich <trinidad@eekboom.com > wrote:
> >
> > I used a panelBorderLayout to layout my page.
> > The left facet contains a panelBox for navigation.
> > Unfortunately the rendering of panelBorderLayout makes it very hard
> > to have my navigation panelBox 100% height (which is a client
> > requirement).
> > panelBorderLayout puts the "left" facet in a <td>, but that cell does
> > not have 100% set.
> > Therefore setting the cell's content (my panelBox) to height:100%
> > has no effect at all.
> >
> > Heavy usage of firebug resulted in a solution, but that is hacky and
> > only
> > works in firefox:
> > Set a style class: <tr:panelBorderLayout styleClass="myPanelBorder">
> > Use child selectors to modify the td height:
> >         .myPanelBorder > tbody > tr > td {
> >                 height: 100%;
> >         }
> >
> > Isn't that ugly.
> > Two possible soltuions:
> > - Change the panelBorderLayout render, so that it always gives the td's
> > height:100%. I don't see any disadvantages in that. The child (facet)
> > is then free to use that height or not.
> >
> > - Make the panelBorderLayout skinnable.
> >
> > What do you think?
> >
>
>

Re: panelBorderLayout problem: start/end cannot have 100% height

Posted by Simon Lessard <si...@gmail.com>.
Hello Stephen,

Have you tried innerStart facet as well by any chance?

On 8/10/07, Stephen Friedrich <tr...@eekboom.com> wrote:
>
> I used a panelBorderLayout to layout my page.
> The left facet contains a panelBox for navigation.
> Unfortunately the rendering of panelBorderLayout makes it very hard
> to have my navigation panelBox 100% height (which is a client
> requirement).
> panelBorderLayout puts the "left" facet in a <td>, but that cell does
> not have 100% set.
> Therefore setting the cell's content (my panelBox) to height:100%
> has no effect at all.
>
> Heavy usage of firebug resulted in a solution, but that is hacky and only
> works in firefox:
> Set a style class: <tr:panelBorderLayout styleClass="myPanelBorder">
> Use child selectors to modify the td height:
>         .myPanelBorder > tbody > tr > td {
>                 height: 100%;
>         }
>
> Isn't that ugly.
> Two possible soltuions:
> - Change the panelBorderLayout render, so that it always gives the td's
> height:100%. I don't see any disadvantages in that. The child (facet)
> is then free to use that height or not.
>
> - Make the panelBorderLayout skinnable.
>
> What do you think?
>