HTMLPanel centering with UIBinder and GWT

Question

The code below displays a login box in the upper left hand corner of a Browser, but I would like to display it in the center.

I have read various topics on how to center using CSS style elements and the cell element, but they are not working. Maybe I am doing something wrong.

I am just starting to learn UiBinder so excuse my bad style.

Any help would be appreciated, thank you.

Here is the code:

<ui:style>
        buttonsDiv{
        float: right;
        margin-top: 20px;
    }
</ui:style>
<g:DialogBox text="Instructor Registration">
    <g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>First Name</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Last Name</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Institution</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Department</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>

        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Button ui:field="submit">Submit</g:Button>
            <g:Button ui:field="goBack">Cancel</g:Button>
        </g:HTMLPanel>

    </g:HTMLPanel>
 </g:DialogBox>

I see you're using a DialogBox, that has a center() method, could you call that when showing this? — Marconius
Is there a way I can add CSS elements that can center the Panel within this UiBinder without calling the center() method in java? — user2671383

Christian Achilli Christian Achilli · Accepted Answer · 2013-08-11T14:25:07

EDIT: added Marconius CSS

The following code allow you to center the top left corner of the dialog box (watch out for some correntions I did in your ui binder css grammar):

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
        .buttonsDiv {
            margin-top: 20px;
        }

        .centerCss {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 300px;
            margin-top: -150px;
            margin-left: -75px;
       }
    </ui:style>
    <g:VerticalPanel stylePrimaryName="{style.centerCss}">
        <g:DialogBox text="Instructor Registration">
            <g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>First Name</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Last Name</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Institution</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Department</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>

                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Button ui:field="submit">Submit</g:Button>
                    <g:Button ui:field="goBack">Cancel</g:Button>
                </g:HTMLPanel>
            </g:HTMLPanel>
        </g:DialogBox>
    </g:VerticalPanel>
</ui:UiBinder>

If you actually want to center the dialog box itself you should make some more considerations, it in not so straightforward. You may want to have a look t the implementation of the center() method in the PopupPanel class.

HTMLPanel centering with UIBinder and GWT

1 Answers