Blog Archives

Center Panel on Screen

To display a panel on the screen you often use such code:

RootPanel.get().add(myPanel);

I need a panel, which will be displayed on the center of the browser window. To get this, I create a div within the HTML page, which loads my GXT3 application:

<div id="gxt-app" class="center">

Within the GXT application I reference this div now:

RootPanel.get("gxt-app").add(myPanel);

I don’t know, how the size of myPanel is, so we have to create a little CSS snippet to calculate the size and move the div into the center of the browser window:

.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}