Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Layout problems with Sections when sectionStack.setOverflow(Overflow.AUTO) is set

    I'm facing a problem when there is a SectionStack with a horizontal scrollbar shown.
    The width of the section headers and section content does not adjust to the width of the scroll area but is fixed to the visible width.

    Code to verify and understand what i mean:
    Code:
    @Override
    public void onModuleLoad() {
    
    HLayout layout = new HLayout();
    layout.setMargin(20);
    layout.setWidth(600);
    layout.setHeight(800);
    
    final SectionStack sectionStack = new SectionStack();
    sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);
    sectionStack.setOverflow(Overflow.AUTO);
    sectionStack.setBackgroundColor("red");
    
    SectionStackSection section1 = new SectionStackSection("Title - Section 1");
    section1.setExpanded(true);
    Canvas canvas1 = new Canvas();
    canvas1.setWidth(900);
    canvas1.setHeight(300);
    canvas1.setBackgroundColor("blue");
    section1.addItem(canvas1);
    sectionStack.addSection(section1);
    
    SectionStackSection section2 = new SectionStackSection("Title - Section 2");
    section2.setExpanded(true);
    Canvas canvas2 = new Canvas();
    canvas2.setWidth100();
    canvas2.setHeight(300);
    canvas2.setBackgroundColor("green");
    section2.addItem(canvas2);
    sectionStack.addSection(section2);
    
    layout.addMember(sectionStack);
    layout.draw();
    }
    Screenshot after scrolling:
    Click image for larger version

Name:	2018-05-02 14_34_03-accordion_section_width.png
Views:	174
Size:	3.9 KB
ID:	253064
    What I want to achieve is the green canvas (and the white section headers) to have the width of the blue canvas. Without setting a fixed width because unfortunately in reality I don't know the width until the canvas is drawn.

    The reason for sectionStack.setOverflow(Overflow.AUTO) is that the sectionStack has actually many sections and the content for each can have a different height and width. Now I want one vertical scrollbar for the sectionStack and not one vertical scrollbar for each section. However, if my request above seems to be impossible it would also be fine if the sectionStack has one vertical scrollbar and each section a horizontal scrollbar (if needed). But i could not find a way to set horizontal and vertical scrollbars separately.

    Any help appreciated.

    #2
    This is intended and by design. Syncing the width of all members to whichever happens to be overflowing most creates potential performance problems and runaway loops, and in this instance, can move right-justified content offscreen needlessly.

    Better options are:
    1. Set overflow:auto on the specific member so scrollbars appear only on that member
    2. If you really have a situation where it's better for all members to match the largest, you can set layout.minBreadthMember to the member to match, and the layout code handle this efficiently by always dealing with that member first

    Comment

    Working...
    X