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 <[email protected]> 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*: > 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 -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
