Layout assistance

Hi,
I’m struggling with a layout problem and if anyone would be willing/knows how to help out i would appreciate it. Code for a test window/panel to demo my problem is pasted below.

TestPanel - is a panel of buttons.
TestWindow - contains just a horizontal layout that TestPanel is added to

I’m basically trying to have the TestPanel middle aligned within the main horizontal layout of the TestWindow class, and if the TestWindow is resized to a point where not all the buttons fit the window then a horizontal scrollbar should appear.

When setting TestPanel to undefined size the panel is middle aligned but no scrollbar appears when the window is resized. When not setting as undefined the scrollbars do appear but the panel is not middle aligned any longer.

I’ve been trying various things with no luck, i believe it must be something simple i’m missing and/or not understanding about the layouts, so i would appreciate some input and assistance on how to get this working.

Tnx a lot
Cheers


public class TestWindow extends Window {

   public TestWindow(boolean test) {
      TestPanel tp = new TestPanel();
      
      HorizontalLayout mainhl = new HorizontalLayout();
      
      // When this line is commented out the panel is left aligned and scrollbars appear fine
      // When this line is un-commented then the panel is middle aligned as required but no scrollbars appear when the window is resized
      //tp.setSizeUndefined(); 

      mainhl.setWidth("100%");
      mainhl.addComponent(tp);
      mainhl.setComponentAlignment(tp, Alignment.MIDDLE_CENTER);
      
      setSizeFull();
      setContent(mainhl);
   }
 
}

public class TestPanel extends Panel {

   private HorizontalLayout layout = new HorizontalLayout();
   
   public TestPanel() {
      setContent(layout);
      setStyleName(Reindeer.PANEL_LIGHT);
      setScrollable(true);
      
      initTestButtons();
   }
   
   private void initTestButtons() {
      
      Button cashSaleB = new FrontPageAction("Cash Sale");
      Button cashCarryB = new FrontPageAction("Cash & Carry");
      Button tenderB = new FrontPageAction("Tender");
      Button clearB = new FrontPageAction("Clear");
      
      layout.addComponent(cashSaleB);
      layout.addComponent(cashCarryB);
      layout.addComponent(tenderB);
      layout.addComponent(clearB);
      
      layout.setSizeUndefined();
   }
}


So I’m assuming that you’d want the Panel to have undefined width so that it grows until it’s full width, and then be defined.

If you set undefined width for the Panel, it grows to fit its content (the HorizontalLayout), so it will never have scrollbars. You can center it as long as its less wide than the window.

If you have a 100% width for it (it is the default for Panel) it fills the window width which limits the width of the content area, so scrollbars can appear. But you can’t center something that takes 100% width.

The only way that comes to my mind is using the CSS “max-width” property for the panel, as is done
here
. The problem is that it does not seem to work with relative size so that it would take the full width of a window. The problem is probably because of some width calculations in the Vaadin rendering engine. Notice that max-width might have problems in some browsers (IE).

Using expand ratios somehow might be the closest possibility to accomplish that with normal Vaadin layouts without CSS tricks, but I’m not sure if it is possible.

The setScrollable() has nothing to do with scrollbars.

Thanx Marko, i appreciate the help.
I will give your max-width suggestion a try and if i don’t come right i will just have to get our css guy to help me out. I’m not too worried about the max-with attribute giving problems in IE as this is a legacy app only certified for firefox and we are right now rewriting a small sale component using vaadin to take it for a test drive and if it all falls into place without issues i’m pretty sure the rest of the system UI will follow, i have reviewed a lot of java UI frameworks and it came down to ZK vs Vaadin in the end, but vaadin took the cake as it really is a great RIA framework.

Anyway thanx for the assistance.

Cheers
Marko