Table in Form Footer makes Save button invisible in small windows

I have a window which contains a splitter layout. The secondComponent is a VerticalLayout which contains a form. The form’s footer is also a VerticalLayout which contains a Table and a “Save” Button. When the res is 1152x864, I can see the button below the table. If I view the Window in, say, 1024x768, the button gets cut off, as well as the table (because of the default page length of 15). I would expect that the table resizes in such a way that the button is still visible, or that a scrollbar appears, but neither occurs. I am looking for suggestions to address this issue. I have included the trimmed code, omitting the parts which are irrelevant. storeForm is the component in question.


@org.springframework.stereotype.Component
@Scope("session")
public class ActivationsListWindow extends AbstractWindow implements WindowAttachListener {
  private SplitPanel mainLayout;
  private Table activationsTable;
  private Form storeForm;
  
  @Override
  public void postConstruct() {        
    final MenuBar menuBar = new MenuBar();
    menuBar.setWidth("100%");
    
    activationsTable = new ActivationsTable("", getService().getStoreContainer());
    activationsTable.addListener(
      new Property.ValueChangeListener() {        
        @Override
        public void valueChange(ValueChangeEvent event) {
          String itemId = (String) event.getProperty().getValue();
          storeForm.setItemDataSource(itemId != null ? activationsTable.getItem(itemId) : null);
        }        
      }
    );
    
    storeForm = new StoreForm();
    
    mainLayout = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
    mainLayout.setFirstComponent(
      new VerticalLayout() {
        {
          setSizeFull();
          addComponent(activationsTable);
        }
      }        
    );
    mainLayout.setSecondComponent(
      new VerticalLayout() {
        {
          setMargin(true);
          setSizeFull();
          addComponent(storeForm);
        }
      }
    );
    
    storeForm.setItemDataSource(null);
    
    setContent(
      new VerticalLayout() {
        {
          setSizeFull();
          addComponent(menuBar);
          addComponent(mainLayout);
          setExpandRatio(mainLayout, 1.0f);
        }
      }
    );
  }

  private class ActivationsTable extends Table {
    private String[] visibleColumns = {"id", "name", "platform", "status", "activateDate"};    
    private String[] columnHeaders = {"License", "Name", "Platform", "Status", "Activation Date"};
    
    public ActivationsTable(String caption, StoreContainer dataSource) {
      super(caption, dataSource);
      
      setSelectable(true);
      setSizeFull();
      setImmediate(true);
      setSortContainerPropertyId("activateDate");
      setSortAscending(false);
      setVisibleColumns(visibleColumns);
      setColumnHeaders(columnHeaders);
      setColumnExpandRatio("name", 1.00f);
    }
  }
  
  private class StoreForm extends Form {
    private String[] editableFields = {"id", "name", "contact", "phone", "platform", "resolution", "comments"};
    
    private Table history = new Table("History") {      
      {
        setSizeFull();
        setColumnHeaderMode(Table.COLUMN_HEADER_MODE_HIDDEN);
        setPageLength(10);
      }
      
      @Override
      public void setVisibleColumns(Object[] visibleColumns) {
        if (visibleColumns != null && visibleColumns.length > 0) {
          super.setVisibleColumns(new String[] {"description", "user", "createDate"});
        } else {
          super.setVisibleColumns(visibleColumns);
        }
      }
    };
    
    public StoreForm() {
      super(null, null);
      
      getLayout().setMargin(false);
      
      VerticalLayout footer = new VerticalLayout();
      footer.setSpacing(true);
      //put some space between the Comment and History
      footer.setMargin(true, false, false, false);
      footer.addComponent(history);
      footer.addComponent(
        new Button(
          "Save",
          new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
              commit();
              activationsTable.setValue(null);
            }          
          }
        )
      );
      
      setSizeFull();
      setFooter(footer);
      setWriteThrough(false);
      setReadThrough(false);
      setFormFieldFactory(new StoreFieldFactory());
    }
    
    @Override
    public void setItemDataSource(Item newDataSource) {
      if (newDataSource instanceof Buffered) {
        ((Buffered) newDataSource).setWriteThrough(false);
      }
      
      setItemDataSource(newDataSource, Arrays.asList(editableFields));

      //TODO: de-couple form from splitter using an event
      mainLayout.setSplitPosition(newDataSource == null ? 100 : 50);
      mainLayout.setLocked(newDataSource == null);
    }
    
    @Override
    public void commit() throws SourceException {
      Item item = getItemDataSource();
      item.getItemProperty("status").setValue(getService().getStatusContainer().getEntity("completed"));
      
      super.commit();
      
      if (item instanceof Buffered) {
        Buffered bufferedItem = (Buffered) item;
        
        if (!bufferedItem.isWriteThrough()) {
          bufferedItem.commit();
        }
      }
    }
    
    private class StoreFieldFactory extends DefaultFieldFactory {
	  //Code ommitted
    }
  }
}

Well. a clear problem is that you have called setSizeFull() on about every component you have. For example, you can’t get scrollbars on a panel if it’s VerticalLayout is set to height 100% (setSizeFull()) because the size of the panel and the VerticalLayout is thus exactly the same. Layouts again doesn’t support scrollbars so it won’t add them either.

The key is to have the panels at full size (setSizeFull()) and have the layouts at undefined height (this is the default value).

About the table: you first say setSizeFull() to it, which means that it shall be as long as it has space, but then you directly after say that it shall have a page length of 10, which is a fixed size of ten rows visible, always. These contradict each others, so remove one. If I understood correctly, you want it to grow and shrink with space available, so remove setPageLenght(10).

The lower part will probably get a scrollbar if you remove the setSizeFull() of the secondComponent VerticalLayout (row 40).

The code is quite long to work out all the kinks here in the forum, so try these, and experiment with removing some setSizeFull()'s and by using expand ratios.

Thanks for your feedback Jens. It is much appreciated and informative.

So, I removed the setSizeFull() from the VerticalLayout surrounding the form itself and got the result I was looking for. Thanks again!