If you want to set the width of a page, you can modify the style sheet of your application. The "borderTable" style controls the outer table of the page. The width attribute on this style controls the width of the page.
By default, the borderTable style does not contain a width attribute, so is defaults to 100% of the width of the browser. You can add a new width parameter as follows in the Style.css file (contained in the Styles folder available from the Application Explorer).
.borderTable {
width: 600px;
}
If you are using horizontal menus, you can further reduce the width of the menu items if you like. The menu item widths can be reduced by removing the padding around the menu text and/or reducing the menu item tab edges in the style sheets and menu item HTML. (The best themes to use are those which don't have menu item tab edge graphics, e.g., Alps, Annapurna, McKinley, and Vanilla, so that reducing the left/right padding around the menu text will result in the absolute minimum width for each menu item.)
As an example, here is how you can compress the menu width of the Alps design theme. (Note that Alps only has "right" "menu item tab edges" so only TR, R, and BR have been modified; otherwise TL, L, and BL can also be reduced.)
.menu_on-TR {
width:1; // in the "before" case, width = 40px
}
.menu_on-R {
width:1; // in the "before" case, width = 40px
}
.menu_on-BR {
width:1; // in the "before" case, width = 40px
}
.menu_off-TR {
width:1; // in the "before" case, width = 40px
}
.menu_off-R {
width:1; // in the "before" case, width = 40px
}
.menu_off-BR {
width:1; // in the "before" case, width = 40px
}
You can also reduce menu item tab edge widths in the HTML (Menu_Item.html, Menu_Item_Highlighted.html). (Note that Alps only has "right" menu item tab edges so only TR, R, and BR have been modified; otherwise TL, L, and BL can also be modified.)
<td class="menu_on-TR"><img src="../Images/space.gif" height="6" width="1" alt=""></td> <!-- in the "before" case, width= 40px -->
<td class="menu_on-R"><img src="../Images/space.gif" height="15" width="1" alt=""></td> <!-- in the "before" case, width= 40px -->
<td class="menu_on-BR"><img src="../Images/space.gif" height="7" width="1" alt=""></td> <!-- in the "before" case, width= 40px -->
<td class="menu_off-TR"><img src="../Images/space.gif" height="6" width="1" alt=""></td> <!-- in the "before" case, width= 40px -->
<td class="menu_off-R"><img src="../Images/space.gif" height="15" width="1" alt=""></td> <!-- in the "before" case, width= 40px -->
<td class="menu_off-BR"><img src="../Images/space.gif" height="7" width="1" alt=""></td> <!-- in the "before" case, width= 40px -->
Alps menu items do not have any padding around its menu text, so styles didn't have to be adjusted here.
Note that in reality, all browsers only take these width specifications as suggestions / recommendations. If the content on the page is not too wide (i.e., it can be line-broke, or empty white space can be collapsed), the browser will use the requested width. However, if the content cannot be collapsed (e.g., many table columns of data displayed, stylesheet specifies data is not to be line-wrapped, or non-collapsible images are present, like the 820px-wide button bar / pagination row combo), then the browser will use the MINIMUM horizontal width needed to display such content.
Customizing the Application Style Sheet