Layout Vertical Center Alignment

[dbscott525]

I am using SmartGWT release 5.1-p20160505.

I am trying to get a layout contained within another layout to be centered vertically and horizontally. I can get horizontal centering but so far I have been unable to achieve vertical centering.

Here is my test code:

 
[B]public[/B] [B]class[/B] VerticalCenteringEntry [B]implements[/B] EntryPoint {
    @Override
    [B]public[/B] [B]void[/B] onModuleLoad() {
        containerLayout().show();
    }
 
    [B]private[/B] VLayout containerLayout() {
        [B]return[/B] [B]new[/B] VLayout() {
            {
                setLayoutAlign(VerticalAlignment.[B][I]CENTER[/I][/B]);
                setWidth(500);
                setHeight(500);
                setBorder("1px solid black");
                addMember(containedLayout());
            }
 
        };
    }
 
    [B]private[/B] VLayout containedLayout() {
        [B]return[/B] [B]new[/B] VLayout() {
            {
                setLayoutAlign(VerticalAlignment.[B][I]CENTER[/I][/B]);
                setWidth(300);
                setHeight(300);
                setBorder("1px solid red");
            }
 
        };
    }
}

Notes on the test code:

1. I tried setLayoutAlign(VerticalAlignment.CENTER) in the container layout alone, in the contained layout alone, and in both layouts. In all cases vertical centering is not achieved.
2. setLayoutAlign(VerticalAlignment.CENTER) causes horizontal centering.

[Isomorphic]

The properties for managing alignment within a layout are as follows:

layout.align: This specifies how members should be aligned on the length axis. So for a vertical layout, setting layout.align to VerticalAlignment.CENTER will cause members to be centered vertically. As an aside, you could achieve the same appearance by adding a "*" sized layoutSpacer widget before and after all other members.

canvas.layoutAlign: This is a property you can set on any canvas to specify how it should align on the breadth axis within a layout, so on a vertical layout, setting layoutAlign to Alignment.CENTER *on a member* will cause it to be centered horizontally in the vertical layout.

layout.defaultLayoutAlign: This is a property you can set at the layout level to govern the layoutAlign for all members (unless explicitly overridden by having member.layoutAlign set). So instead of setting layoutAlign to "center" on the member, you could achieve horizontal centering within a VLayout by setting layout.defaultLayoutAlign to Alignment.CENTER

Edit: To clarify this further here's a reworked, commented version of the sample showing centering on both axes:

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.widgets.layout.VLayout;

public class VerticalCenteringEntry implements EntryPoint {
    @Override
    public void onModuleLoad() {
        containerLayout().show();
    }
 
    private VLayout containerLayout() {
        return new VLayout() {
            {
                // set the "align" property to "center" - this will center
                // the members along the length axis (vertically)
                setAlign(VerticalAlignment.CENTER);
                // set the "defaultLayoutAlign" property to "center" - this acts as
                // a default setting for the member-level "layoutAlign" property and
                // will center the members on the breadth axis (horizontally)
                setDefaultLayoutAlign(Alignment.CENTER);
                setWidth(500);
                setHeight(500);
                setBorder("1px solid black");
                addMember(containedLayout());
            }
 
        };
    }
 
    private VLayout containedLayout() {
        return new VLayout() {
            {
                // At the member level we could explicitly set "layoutAlign"
                // to "center" to center this member on the breadth axis
                // (horizontally, since it's a member of a VLayout)
                // If not set explicitly, we'll pick up the defaultLayoutAlign
                // set at the layout level
//                setLayoutAlign(VerticalAlignment.CENTER);
                setWidth(300);
                setHeight(300);
                setBorder("1px solid red");
            }
 
        };
    }
}

Regards
Isomorphic Software

[Ricardo CamTen]

you can try , adding a [VLayuot] inside [HLayout] , like that

HLayout loHlayout = new HLayout();
loHlayout.setWidth100();
loHlayout.setHeight100();
loHlayout.setAlign(Alignment.CENTER);//center canvas

VLayout loVlayout = new VLayout();
loVlayout.setWidth100();
loVlayout.setHeight100();
loVlayout.addMember(canvasItemCenter);

loHlayout.addMember(loVlayout);


logically a HLayout works left - right , then we add a Vlayout so add items downward