Making FlowLayout align its tiles RIGHT

[kjmoroney]

I have an application with a set of single row DynamicForms (they contain fields that allow the user to set 'options' ... like SelectItem and other type fields). Depending on client resolution, I'd these forms to wrap to the next line (if not enough room) or stay right justified (if enough room). I'm able to accomplish the first requirement by putting each control in its own dynamicForm and then putting all the forms in a FlowLayout. However, when I do this, all the forms are aligned left.

How do I I make it so the FlowLayout will align its tiles starting from the RIGHT and move LEFT (rather than the default LEFT to RIGHT)? I've tried setLayoutAlign(Alignment.RIGHT) on each of the forms before adding them to the FlowLayout. I've tried a LayoutSpacer. I've tried various align options on the FlowLayout itself.

If I'm not able to accomplish this with the FlowLayout, is there another method I can use to allow

1. Fields aligned right on the page (akin to 'float:right')
2. Fields wrap to the next line if not enough room

I'm able to accomplish #1 using a single DynamicForm that contains all the fields wrapped in a HLayout with setAlign(Alignment.RIGHT). However, this doesn't accomplish #2.

Here's the current code I'm using.

    private void populateDock(FlowLayout dock)
    {
        //This doesn't work
        LayoutSpacer spacer = new LayoutSpacer();
        spacer.setWidth100();
        dock.addTile(spacer);
        
        String id = paneldto.getId();
        for (SelectorPaneDTO dto : paneldto.getSelectors())
        {
            DynamicForm form = new DynamicForm();
            form.setHeight(22);
            form.setMargin(0);
            form.setPadding(0);
            form.setCellPadding(0);

            //This doesn't have any effect
            form.setLayoutAlign(Alignment.RIGHT);
            
            CanvasItem selectoritem = new SelectorRenderer(dto.getContent(), id);
            form.setFields(selectoritem);
            dock.addTile(form);
        }
    }

[Isomorphic]

FlowLayout doesn't currently have an option to stack tiles starting from the right-hand side. If you need this behavior, you could implement it yourself starting from Canvas, or you could use Feature Sponsorship to have it added.

Note that member.layoutAlign applies to Layout subclasses like VLayout and HLayout, not TileLayout, that's why it didn't do anything. Also, if added as a feature, this would be a layout-level setting like FlowLayout.algin, in analogy to Layout.align.

[kjmoroney]

Thanks for the reply. With the "implement my own" approach, does the Canvas manage the "wrap" or would I have to add unmanaged children to the canvas and then self manage the placement of each child via absolute positioning logic (with additional logic in the resize event to determine when the width of the canvas is not large enough to display all children in a single line)? If the former, how do I go about asking the canvas to wrap the contents? I suspect that the answer is the latter ... and if so, I'll have to try another approach. That exceeds my abilities :-)

I've tried using an HLayout but the fields simply extend past the visible area (and a scrollbar appears at the bottom of the page).

Thanks again for the quick assistance.

[Isomorphic]

Canvas will not auto-wrap components, it allows the components to position themselves.