Example: Set Application Page Width (Classic Themes)

Updated March 26, 2010
Iron Speed Designer Version 7.0 and later

You can control the width of a page and its horizontal-alignment within the browser.

Basic approach

Step 1: In Application Explorer, open your application’s master page (HorizontalMenu.master, VerticalMenu.master, etc.) and switch to Layout Editor.

Step 2: In the Page Directives dialog (Right-click, Page Directives…) add this HTML code to the end of the Prolog section:

<tr>

<td>

And add this HTML to the top of the Epilog section:

</td>

</tr>

</table>

Step 3: Copy the pbTable class from BaseStyles.css to Styles.css so you can customize the class. Classes defined in Styles.css automatically override those in BaseStyles.css.

Step 4: In Styles.css, add a “width” attribute to the pbTable class. By default, the pbTable class does not contain a width attribute, so it defaults to 100% of the width of the browser. You can add a width attribute to set the page width.

.borderTable, .pbTable { /* page content container */

width: 600px;

}

Note that width specifications are only taken as “suggestions” by the browser, and the page width will actually depend upon the content within the table grid.

Step 5: Build and run your application.

Centering the page

Similarly you can center the page within the browser using margin-left and margin-right properties.

.borderTable, .pbTable { /* page content container */

margin-left: auto;

margin-right: auto;

}

An alternative, but more flexible solution

A more complicated but flexible approach is to modify your master page using the Page Layout Spreadsheet, using the Tag Attributes dialog to add the desired page width and centering styles.

Step1: In Application Explorer, open your application’s master page (HorizontalMenu.master, VerticalMenu.master, etc.) and switch to Layout Editor.

Step 2: Add a new (empty) column to the left of column A. Then, drag a “Blank Panel No Header” panel from the Toolbox into the top left cell of the master page.

Step 3: Move all pre-existing content on the master page into the newly added blank panel, leaving only the newly added blank panel as the only content at the master-page’s top level. This is easily accomplished by cutting the pre-existing content (select cells, Ctrl-C), zooming into the new blank panel and pasting (Ctrl-V) the ‘cut’ content into the new blank panel.

Step 4: In the newly added panel (now containing the page contents), add these attributes via the Tag Attributes dialog (right-click, Styles, Table…):

Attribute	Value
border	0
cellpadding	0
cellspacing	0

Step 5: Zoom back out to the top-level of the master page containing the single newly added panel. Use the Tag Attributes dialog (right-click, Styles, Table…) to set the appropriate class and other desired style attributes, e.g.:

Attribute	Value
class	pbTable

Step 6: Copy the pbTable class from BaseStyles.css to Styles.css so you can customize the class. Classes defined in Styles.css automatically override those in BaseStyles.css.

Step 7: In Styles.css, customize the pbTable class as needed to achieve the page width or page centering result you desire.

Step 8: Build and run your application.

This approach allows you to to easily add, modify and remove styles.

Example: Set Application Page Width (Classic Themes)

Basic approach

Centering the page

An alternative, but more flexible solution

See Also