Skip to content Skip to sidebar Skip to footer
Home / Css / Gwt / Html

Vertical Centering In Gwt

Post a Comment
how to vertical centering in gwt by using vertical panel.. or pls sugest me is there any way for doing vertical cetering

Solution 1:

If you want to directly use the VerticalPanel from code, you need to use the setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)

You can also use the UiBinder approach

<g:VerticalPanelverticalAlignment='ALIGN_MIDDLE'horizontalAlignment='ALIGN_CENTER'width="100%"height="500px"><g:cell></g:cell></g:VerticalPanel>

Take a look to DevGuideUiPanels for examples and documentation

Solution 2:

I can give you an example on how we did it with css (to implement a popup like behaviour).

If you google for it there are dozens of solutions on how to achieve vertical centering. This example worked for us, so no guarantee if it's of any help for you.

<!DOCTYPE html><html><head><style>
        * {
            margin: 0 auto; 
        }

        .popup {
            border-color:#ff4f00;
            border-style:solid;
            border-width:5px;
            background-color: #ffffff;
            text-align: left;
        }

        #wrapper, #container {
            height: 150px;
            width: 550px;
        }

        #wrapper {
            bottom: 50%;
            right: 50%;
            position:
            absolute;
        }

        #container {
            left: 50%;
            position: relative;
            top: 50%;
        }
    </style><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><title>vertical centering</title></head><body><divstyle="width: 965px; height: 515px;"></div><divid="wrapper"><divclass="popup"id="container">
            some content
        </div></div></body></html>

EDIT: check also this question out.

Post a Comment for "Vertical Centering In Gwt"