Centering Web UI Components on a Page


If you would like the components to remain centered on a page when the browser is resized, try this trick.



  1. Open the Web Pages > resources > stylesheet.css style sheet and add the following style definitions. You will use these styles to define the colum styles in a three column grid panel.


    .ctrFirstColumn { 
       width: 10%;
    }

    .ctrSecondColumn {
       width: 80%;
    }

    .ctrThirdColumn {
       width: 10%;
    }



  2. Set the widths percentages to what works for your page.




  3. Save the changes, then close and reopen the IDE, so that the IDE picks up the new styles.




  4. Add a Grid Panel to the page in the top left corner.





  5. In the Properties window, click the ellipsis (...) button for the style property. Select Position, set both the Width and Height to 100%, and click OK.




  6. Set the columns property to 3.




  7. Click the ellipsis (...) button for the columnClasses. Select ctrFirstColumn and click the > button. Repeat for ctrSecondColumn and ctrThirdColumn. Click OK. These styles are applied to the columns in the grid panel in the order that you list them.




  8. Drop something into the first column, such as a blank Static Text component. As you drop each component into the Grid Panel, it occupies the first available column, so the first component that you drop goes in the first column, the second component goes in the second column, the third component goes in the third column, and the fourth component goes in a new row in the first column. A blank Static Text component is an easy way to occupy the left and right margins with a non-visible component.




  9. For the center column, drop a component from the Layout section, such as a Grid Panel or a Layout Panel. This is the component that you will use to layout all the components in the page. You can nest the layout components as necessary in order to achieve the right layout.



    You most likely want to set the width properties of the layout components to 100% or some other percentage value instead of using pixel sizes.


  10. When you add a Table component, set its width property to 100% or some other percentage value. (See the tips in the Laying out Multiple Table Components blog entry.) One thing to remember, is that whenever you work with the table layout, you have to check to make sure that the IDE did not change the width property back to a pixel width. If you find that your middle panel is not centering, check the width values of the Table components to make sure they are set to percentages.



  11. Drop a blank component, such as a blank Static Text component, to occupy the right column.

  12. Run the web app and resize the width of the browser. The components should remain centered.
Comments:

Hi, This information was very useful to me. I had been figuring out how to center the components in my app, for quite a while now. Thanks a ton. Cheers, Jayashree

Posted by Jayashree on July 09, 2007 at 02:24 PM PDT #

Hi,

When I preview the centered components using NB preview it looks good when I run the app to test it the components appear on the left regardless of web browser.
Anyone else have an issue with this?

Regards

Jim

Posted by Jim Ascroft on August 19, 2007 at 10:58 PM PDT #

Jim, what browser are you using (or are you seeing this with all browsers)?

Posted by Diva #2 on August 20, 2007 at 02:43 AM PDT #

Post a Comment:
Comments are closed for this entry.
About

divas

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today