Centering Web UI Components on a Page
By divas on Jul 09, 2007
If you would like the components to remain centered on a page when the browser is resized, try this trick.
- 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.
- Set the widths percentages to what works for your page.
- Save the changes, then close and reopen the IDE, so that the IDE picks up the new styles.
- Add a Grid Panel to the page in the top left corner.
- 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.
- Set the columns property to 3.
- 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.
- 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.
- 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.
- 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.
- Drop a blank component, such as a blank Static Text component, to occupy the right column.
- Run the web app and resize the width of the browser. The components should remain centered.