Right align label Layout help

[kevboy]

I have a Layout with a title (Label) and a TreeGrid. I'm trying to create expand/collapse labels for a TreeGrid, but I'm having a hard time right aligning the canvas that contains them to the title.

Below is what I have so far (I'm trying to use LayoutSpacers but that's not working). I set borders to see where the Layouts end. I've also attached an image of what this code comes out with.

Any help would be greatly appreciated. Thanks!

private VLayout createSelectionTreeCanvas(String title, final TreeGrid grid) {
    Label expandLabel = Label.createLinkLabel("Expand All");
    expandLabel.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            grid.getData().openAll();
        }
    });
    
    Label collapseLabel = Label.createLinkLabel("Collapse All");
    collapseLabel.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            grid.getData().closeAll();
        }
    });

    HLayout expandCollapseCanvas = new HLayout(expandLabel, createLabel("/"), collapseLabel); // Overloaded constructor that calls setMembers()
    expandCollapseCanvas.setLayoutAlign(Alignment.RIGHT);
    expandCollapseCanvas.setBorder("1px solid blue");
    
    LayoutSpacer layoutSpacer = new LayoutSpacer();
    layoutSpacer.setWidth("*");
    
    HLayout labelCanvas = new HLayout(createLabel(title), layoutSpacer, expandCollapseCanvas); // Overloaded constructor that calls setMembers()
    labelCanvas.setWidth100();
    labelCanvas.setBorder("1px solid green");
    
    VLayout main = new VLayout(labelCanvas, grid); // Overloaded constructor that calls setMembers()
    main.setBorder("1px solid red");
    return main;
}

/**
 * (U) Return link label
 * 
 * @param contents contents to display
 * @return link label
 */
public static Label createLinkLabel(String contents) {
    Label label = new Label(contents);
    label.setAutoHeight();
    label.setAutoWidth();
    label.setWrap(false);
    label.setStyleName("linkLabel");
    return label;
}

private Label createLabel(String title) {
    Label label = new Label(title);
    label.setAutoHeight();
    label.setAutoWidth();
    label.setWrap(false);
    return label;
}

CSS:

.linkLabel {
  text-decoration: underline;
  color: blue; 
  font-size: 12px;
  cursor:pointer; cursor: hand
}

[Isomorphic]

Can you also show an image of what you want?

And have you already seen layout.align and layout.layoutAlign? There are some new centering and placement samples in the Showcase as well (in nightlies).

[kevboy]

Thanks for your quick reply. Attached is what we want to do.

[Isomorphic]

Look in the Watch Tab of the Developer Console to help solve this kind of problem. Your expandCollapseCanvas is taking up all the space and the LayoutSpacer isn't getting any.

It looks like you were trying to compensate for this with setLayoutAlign, but note the docs on Layout.setAlign vs canvas.setLayoutAlign() - you probably meant setAlign(right) instead, and in this case, you won't need the LayoutSpacer.