How to handle properly the height in %?

[Jean-luc Chasseriau]

Hi!

It is the 3rd or 4th sites I'm doing with GWT, it is a very sexy solution which is working nicely, but I'm still having some basic problems of setting the height of some elements of my sites. This is really basic, but not so easy to handle...

I really hope that some GWT guru can help us (I'm sure I'm not the only one to get that issue) on what is the best practice to handle such cases.

Problems:

1) How do I set the height of a widget when setHeight() does not work with % or not as expected (either height=0, or not as expected)?

2) Why in onLoad(), headerPanel.getOffsetHeight() and footerPanel.getOffsetHeight() are == 0? (Please read code bellow)

3) Same with ScrollerPanel, how can I set the height of it without need to set it in pixels?

4) Why height in % behavior does not work when included in a DecoratorPanel?

I could read on gwt group that the height is very browser dependent and would require heavy calculs - BUT - do we need to do them in Applications?

Code principles:

- gwt 2.1.0.m2 (same issus with 2.04)

- NOT using declarative UI with UiBinder - good old style java code

- Using Standard Mode, and, LayoutPanels

Site description:

- 1 FlowPanel used as like VerticalPanel, filled with

- 1 headerPanel: FlowPanel containing 2 other FlowPanel: logoPanel, and flagPanel

- 1 tabPanel: TabLayoutPanel containing few tabs

- 1 footerPanel: FlowPanel containing a Label

Idea:

- header is fixed height depending on logos (image) height, and possible margin/padding in css.

- footer is fixed height depending on label height, and possible margin/padding in css

- tabPanel's height depends on the document height => it should fill the whole space between header and footer.

Solutions in mind:

- use tabPanel.setHeight( "100%" ), but it does take the 100% of the whole page (!), not the 100% of the space between header/ footer.

- calculate tabPanel's height in px, BUT, I need to know the height of the header and the footer, which isn't accessible through getOffsetHeight()...

Code:

Here is my Application.java file:

public class Application extends Composite implements ResizeHandler {

  final FlowPanel logoPanel = new FlowPanel();

  final FlowPanel flagPanel = new FlowPanel();

  final FlowPanel headerPanel = new FlowPanel();

  final SimplePanel headerWrapperPanel = new SimplePanel();

  final CipherPanel cipherPanel = new CipherPanel();

  final OptionPanel optionPanel = new OptionPanel();

  final AboutPanel aboutPanel = new AboutPanel();

  final TabLayoutPanel tabPanel = new TabLayoutPanel( 3, Unit.EM );

  final FlowPanel footerPanel = new FlowPanel();

  final FlowPanel panel = new FlowPanel();

  public Application() {

    final Image padlockImg = new Image( Resources.inst.padlock() );

    final Image titleImg = new Image( Resources.inst.title() );

    final Image flagUKImg = new Image( Resources.inst.flagUK() );

    final Image flagFRImg = new Image( Resources.inst.flagFR() );

    final Image flagESImg = new Image( Resources.inst.flagES() );

    final Label emailLabel = new Label( Strings.inst.contactEmail() );

    flagUKImg.addStyleName( "App_flagImg" );

    flagFRImg.addStyleName( "App_flagImg" );

    flagESImg.addStyleName( "App_flagImg" );

    logoPanel.add( padlockImg );

    logoPanel.add( titleImg );

    logoPanel.addStyleName( "App_logoPanel" );

    flagPanel.add( flagFRImg );

    flagPanel.add( flagUKImg );

    flagPanel.add( flagESImg );

    flagPanel.addStyleName( "App_flagPanel" );

    headerPanel.add( logoPanel );

    headerPanel.add( flagPanel );

    //headerWrapperPanel.setWidget( headerPanel );

    tabPanel.add( cipherPanel, CipherPanel.Strings.inst.panelTitle() );

    tabPanel.add( optionPanel, OptionPanel.Strings.inst.panelTitle() );

    tabPanel.add( aboutPanel, AboutPanel.Strings.inst.panelTitle() );

    tabPanel.addStyleName( "App_tabPanel" );

    tabPanel.setSize( "80%", "100%" );

    emailLabel.addStyleName( "App_emailLabel" );

    footerPanel.add( emailLabel );

    panel.add( headerPanel );

    //panel.add( headerWrapperPanel );

    panel.add( tabPanel );

    panel.add( footerPanel );

    panel.addStyleName( "App_panel" );

    initWidget( panel );

  }

  protected void onLoad() {

    super.onLoad();

    String txt = "logo panel: " + logoPanel.getOffsetHeight() + " header height: " + headerPanel.getOffsetHeight() + " header wrapper height: " + headerWrapperPanel.getOffsetHeight() + " footer height: " + footerPanel.getOffsetHeigh

t() + " panel.height: " + panel.getOffsetHeight();

    Window.alert( txt );

  }

}

Note: no size has been set in the .css.

Description:

- Here, I'm using tabPanel.setSize( "80%", "100%" ), which does set the height but definitely too big, it seams that it use the 100% of the ClientWidth!

- Also, in onLoad() I'm printing the height of the logoPanel (which is correct), headerPanel (which is ==0), I've used a headerWrapperPanel (which is ==0), footerPanel (==0 too) - 

Why these panels do not get the height of their inner panels?

I also got the problem with ScrollerPanel, impossible to tell it setHeight("100%")... It is a nightmare! 

We need to set the size in pixel which is almost impossible in some case...

Why is it still so complicated to set widget's height in the second version of GWT?

GWT is a sweet toolkit! I love the idea, and I love it, BUT, some times it is a pain! With such basic stuffs, it is quite annoying...

Thanks to all, and be happy!

--
Jeanluc

[Johannes Lehmann]

Hi Jean-luc,

two things of interest (hopefully) about height in percent:

- It is ignored inside table cells, by the browser. This is precisely
the reason that you will never AFAIK be able to set the height in
percent inside a decorator panel. The obvious workaround is to try and
produce the same effect by using the <div> based DockLayoutPanel.
Setting the height in pixels always seems to bite you later...

- It does not include any padding or margin. Hence if you want to set
such I find it best to wrap your Widget into a SimplePadding and set
padding on the SimplePanel. Not sure if this helps in your case.

Hope that helps,

Johannes

On Aug 6, 4:18 pm, Jean-luc Chasseriau <jean...@kernub.net> wrote:
> Hi!
>
> It is the 3rd or 4th sites I'm doing with GWT, it is a very sexy solution
> which is working nicely, but I'm still having some basic problems of setting
> the height of some elements of my sites. This is really basic, but not so
> easy to handle...
>
> I really hope that some GWT guru can help us (I'm sure I'm not the only one
> to get that issue) on what is the best practice to handle such cases.
>

> *Problems:*

> 1) How do I set the height of a widget when setHeight() does not work with %
> or not as expected (either height=0, or not as expected)?
>
> 2) Why in onLoad(), headerPanel.getOffsetHeight() and
> footerPanel.getOffsetHeight() are == 0? (Please read code bellow)
>
> 3) Same with ScrollerPanel, how can I set the height of it without need to
> set it in pixels?
>
> 4) Why height in % behavior does not work when included in a DecoratorPanel?
>
> I could read on gwt group that the height is very browser dependent and
> would require heavy calculs - BUT - do we need to do them in Applications?
>

> *Code principles:*

> - gwt 2.1.0.m2 (same issus with 2.04)
> - NOT using declarative UI with UiBinder - good old style java code
> - Using Standard Mode, and, LayoutPanels
>

> *Site description:*

> - 1 FlowPanel used as like VerticalPanel, filled with
>
> - 1 headerPanel: FlowPanel containing 2 other FlowPanel: logoPanel, and
> flagPanel
> - 1 tabPanel: TabLayoutPanel containing few tabs
> - 1 footerPanel: FlowPanel containing a Label
>

> *Idea:*

> - header is fixed height depending on logos (image) height, and possible
> margin/padding in css.
> - footer is fixed height depending on label height, and possible
> margin/padding in css
> - tabPanel's height depends on the document height => it should fill the
> whole space between header and footer.
>

> *Solutions in mind:*

> - use tabPanel.setHeight( "100%" ), but it does take the 100% of the whole
> page (!), not the 100% of the space between header/ footer.
> - calculate tabPanel's height in px, BUT, I need to know the height of the
> header and the footer, which isn't accessible through getOffsetHeight()...
>

> *Code*:

> *Description:*

> - Here, I'm using tabPanel.setSize( "80%", "100%" ), which does set the
> height but definitely too big, it seams that it use the 100% of the
> ClientWidth!
> - Also, in onLoad() I'm printing the height of the logoPanel (which is
> correct), headerPanel (which is ==0), I've used a headerWrapperPanel (which
> is ==0), footerPanel (==0 too) -
>

> *Why these panels do not get the height of their inner panels?*

[jeanluc]

Hi Johannes,

First, sorry for this late reply regarding this issue. Life brought me
off my computer and gwt for a while...

Your answer is simple but it says everything: "Setting the height in

pixels always seems to bite you later..."

Except that it requires more work, it is a pity.
I was hopping that gwt would be so perfect that such basic behaviors
would be handled already...
Ok, nothing is perfect.

Thanks!
Best regards,
Be happy!

jeanluc

On Aug 6, 5:10 pm, Johannes Lehmann <johannes.lehma...@googlemail.com>
wrote: