Saturday April 23, 2005
Centering Components The issue of centering components has come up several times before, but I don't think I've actually described in detail how to do it.
The problem is this:
How do you center a component in the page, such that the components appear in the dead center of the browser window, regardless of the size of the user's browser window?
Obviously, the answer is that you do this with CSS. But how? The canonical answer is to use auto margins. Set the width of the components, and set left and right margins to "auto", and the component will be centered. However, it's not -quite- that simple (for example, on IE5 you need to use text-align: center, and once you do that you need to add in other CSS to counteract that bad side effects.) Furthermore, what if you want to vertically center the components too?
A solution for this is actually pretty simple. Briefly, the trick is to use absolute positioning to compute the dead center of the page;
doing that is easy:
position: absolute; left: 50%; top: 50%;But of course that will center the top left corner of your component, not the center of your component. But you can use negative margins to achieve that!
First, you need to decide the width of your component. Let's say it's 200 pixels wide, and 80 pixels tall. In that case, position the component in the dead center, and then subtract half of the width and half of the height such that the center of the component
is centered. In our example, half of 200 is 100, and half of 80 is 40, so we add the following section to the <head> of the page:
<style>
.centerPanel {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 80px;
margin-top: -40px;
margin-left: -100px;
}
</style>
Now you just need to set your component's styleClass attribute to centerPanel (no dot) and it will
be centered.
For example, to make a Login panel centered in your login page, drop a Grid Panel. Drop an Output Text and set its text to "User Name:", drop a Text Field, drop another Output Text (set to "Password:") and drop a Secret Field. Set the Columns property to "2" (such that User Name and its Text Field are on the first line, and Password and its password field are on the second). Now either add the above styleclass definition to your stylesheet, or set the style property to the contents of the above styleclass (position: absolute; top: 50%; ...). Voila - your text should be centered in the page - even when the user resizes their browser page.
Experiment with adding additional CSS properties to set a frame for your Grid Panel to make a border; for example
border: solid 1px gray;
padding: 10px;
(2005-04-23 00:10:37.0)
Permalink
Comments [4]
Comments are closed for this entry.
Posted by Steve on November 03, 2005 at 03:12 PM PST #
Posted by 190.48.132.145 on April 28, 2006 at 08:37 AM PDT #
Posted by 190.48.132.145 on April 28, 2006 at 08:51 AM PDT #
In Creator 2 you can't edit stuff inside <head> since <head> is now generated from a Head component.
Instead, put the style class (e.g. the stuff inside <style> and </style> to your stylesheet instead -- it should be in resources/stylesheet.css (expand the Resources folder in the project manager).
Then go and set the styleClass property for your component to "centerPanel" (note - NOT ".centerPanel" - the initial dot is used in the CSS file to say that the following is a style class, it's not part of the style class name itself).
Oh, and obviously you need to change the pixel values to be the width and half of the width of your intended box.
Posted by Tor Norbye on April 28, 2006 at 09:00 AM PDT #