SectionStackSection - not painted when scroll

[bracinik]

I have 2 sections (form and list) which has wider content than parent layout. I want to scroll both sections with just one scrollbar.

In my sample code when you scroll to the right:
- form, form-items and list-body is painted correctly
- scrolled area for section title stripes are not painted
- scrolled area for table header is not painted

Not painted parts have in the sample code red color.
Do you have any advice?

@Override
public void onModuleLoad()
{
  // sample form items
  FormItem[] formItems = new FormItem[4];
  for (int i = 0; i < 3 ; i++)
  {
    formItems[i] = new TextItem();
    formItems[i].setTitle("title" + new Integer(i + 1));
  }
  formItems[3] = new SpacerItem();

  // sample ListGrid fields
  ListGridField[] listFields = new ListGridField[3];
  for (int i = 0; i < 3 ; i++)
  {
    listFields[i] = new ListGridField();
    listFields[i].setTitle("column" + new Integer(i + 1));
    listFields[i].setWidth(200);
  }

  // dynamic form
  DynamicForm form = new DynamicForm();
  form.setBorder("1px lightGray");
  form.setWidth(600);
  form.setBackgroundColor("lightBlue");
  form.setNumCols(6);
  form.setItems(formItems);
  
  // listGrid
  ListGrid listGrid = new ListGrid();
  listGrid.setBodyBackgroundColor("lightGreen");
  listGrid.setLeaveScrollbarGap(Boolean.FALSE);
  listGrid.setOverflow(Overflow.VISIBLE);
  listGrid.setBodyOverflow(Overflow.VISIBLE);
  listGrid.setFields(listFields);
  
  // sections
  SectionStackSection formSection = new SectionStackSection();
  formSection.setTitle("Form section");
  formSection.setExpanded(Boolean.TRUE);
  formSection.addItem(form);
  SectionStackSection listSection = new SectionStackSection();
  listSection.setTitle("List section");
  listSection.setExpanded(Boolean.TRUE);
  listSection.addItem(listGrid);

  // section stack
  SectionStack sectionStack = new SectionStack();
  sectionStack.setOverflow(Overflow.AUTO);
  sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);
  sectionStack.setSections(formSection, listSection);

  // layout
  VLayout layout = new VLayout();
  layout.setTop(10);
  layout.setLeft(10);
  layout.setWidth(500);
  layout.setHeight(400);
  layout.setBackgroundColor("red");
  layout.setMembers(sectionStack);
  layout.draw();  
}

- the same behaviour is in FF and IE.

[Isomorphic]

It looks like you're expecting that when the form (width 600) is found to be larger than the containing SectionStack (width 500), that the SectionStack will expand all members and headers to match the largest members. This doesn't happen, by design: it would lead to a lot of runaway resizing loops and poor performance.

Your example is too synthetic to offer good advice about how to fix your code - obviously setting the SectionStack's width to 600 fixes the problem in the sample - but depending on how this layout fits into the rest of the screen, you might consider either making the form more vertical or placing it with an overflow:auto container.

As far as the grid specifically not rendering the body as wide as the header, that's what your overflow settings would be expected to do. Most likely, you don't want to use these settings, and you should instead be using listGrid.autoFitData.

[bracinik]

my real case

Thanks. Example is synthetic because of simplification for you to simulate.

I don't think my real case is very rare. It's actualy very similar to official Demo Application from SmartGwt showcase. Just your Demo Application is not perfect, because if you make browser-window smaller you don't have there any scrollbar, so you can not see the rest of content at all.

- Form in first section contains filter attributes and has specified minWidth, because it's ugly when it's smaller than certain width.
- ListGrid contains result of filtration. This ListGrid has a lot of columns, so it has also specified minWidth (the same as filter).
- Third section (which is not in my sample) is used for detail information of selected record in ListGrid.

- Width of Layout and SectionStack in my real case is set to "100%"

In case, that some user has a smaller display (or makes smaller browser-window), he can still use the srollbar. At least if SectionStackSection title-strip is rendered with scrolling (what I suppose is not so expensive for performance) it would not look so amateur. DynamicForm (and all it's items) is rendering correctly even when it's scrolled to the right. In my case even the performance question in ListGrid is not so important. If the browser window is big enough, all the calculations for all the columns has to be done. And when the window is smaller it can be prepared for scrollling and there will be only the same amount of calculations like if the columns are visible.

It's the same like if you have individual scrollbar for each SectionStackSection. I just wanted to use only one scrollbar for all the SectionStackSections instead of individual srcollbars for every section.

Even with this detailed explanation, there is not any good advice / possibility how to improve the behaviour?

[Isomorphic]

We already gave suggestions for improving your design:

.. you might consider either making the form more vertical or placing it with an overflow:auto container.

Once the form is too wide for the page, or too wide for the horizontal space allocated to it, making the grid just as wide as the form is just going to force the user to horizontally scroll to see the rest of the grid contents too, which makes the UE worse, not better.

So we'd suggest one of the approaches above.