Question

I’m using GWT 2.4 and uiBinder.

I’m trying to get a grouping of widgets in the center of a page aligned vertically with a single outside border. I thought it would be fairly easy, but I need to use a vertical layout in the center of the page to align the widgets.

The widgets are lined up the way I wanted using Vertical Panels, but there isn’t a border option available, unless I want to put borders around each of the elements using the borderwidth property.

Here is the uiBinder code:

<g:HTMLPanel ui:field="mainPanel">
         <g:VerticalPanel ui:field="verticalPanel" styleName="{style.center}">
                        <g:Label ui:field="titleLabel"></g:Label>
                        <g:Label ui:field="loggedInUserLabel" text="You are logged in as: "> </g:Label>
                        <g:Label ui:field="userNameLabel" styleName="{style.spacer-bottom}"></g:Label>

                        <g:FormPanel ui:field="formPanel" styleName="{style.spacer-bottom}">
                        <g:FileUpload ui:field="fileUpload"></g:FileUpload>
                        </g:FormPanel>

                        <g:Label ui:field="Label" text="Please select:"></g:Label> 

                        <g:ListBox ui:field="ListBox" styleName="{style.spacer-bottom}" visibleItemCount='5'> 
                            <g:item value="-1">-- Please select item(s) below: --</g:item>
                        </g:ListBox>

                        <g:Button ui:field="Button" styleName="{style.button}" text="Calculate"></g:Button> 

                        <g:HorizontalPanel ui:field="horizontalPanel"  styleName="{style.spacer-top}">
                            <g:cell width='5em' horizontalAlignment="ALIGN_LEFT">
                                <g:Button ui:field="cancelButton" styleName="{style.exitcancelbutton}"  text="Cancel"></g:Button>
                            </g:cell>
                            <g:cell width='5em' horizontalAlignment="ALIGN_RIGHT">
                                <g:Button ui:field="exitButton" styleName="{style.exitcancelbutton}" text="Exit"></g:Button>
                            </g:cell>                   
                        </g:HorizontalPanel>
                </g:VerticalPanel>
    </g:HTMLPanel>

Did I design this wrong, I mean using the wrong panel, for what I’m trying to do?

Answer 1

Okay, I figured this one out on my own. Being a java dev I need to lean more on the CSS solutions, but after doing some thinking, CSS is the correct way to do this. I put this into my CSS:

.mainPanel {
            width: 400px ;
            margin-left: auto ;
            margin-right: auto ;
            border: 1px solid black;
            padding: 2px;
            margin-bottom:6px;
        }

and then I leverage the topmost panel, which is my main container, (the HTMLPanel) and apply the style to it:

<g:HTMLPanel ui:field="mainPanel" styleName="{style.mainPanel}">
            <table width="30%" align="center">
                <tr> etc...

It’s centered in the page and has a border like I wanted. I generally lean towards the table layouts out of habit, but it seems to work well for what I want here.