CODEWITHSUNDEEP
htmlcssgwt
sree
sree

Reputation: 31

vertical centering in gwt

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

Upvotes: 3

Views: 4355

Answers (2)

Carlos Tasada
Carlos Tasada

Reputation: 4444

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:VerticalPanel verticalAlignment='ALIGN_MIDDLE' horizontalAlignment='ALIGN_CENTER' width="100%" height="500px">
  <g:cell></g:cell>
</g:VerticalPanel>

Take a look to DevGuideUiPanels for examples and documentation

Upvotes: 6

z00bs
z00bs

Reputation: 7498

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>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>vertical centering</title>
  </head>
  <body>
    <div style="width: 965px; height: 515px;"></div>
    <div id="wrapper">
        <div class="popup" id="container">
            some content
        </div>
    </div>
  </body>
</html>

EDIT: check also this question out.

Upvotes: 1

Related Questions