When laying out database fields in a FormView with absolute control positioning,
the control’s position needs adjusting in each template where the control is used.
This means that often the control position needs changing in three templates,for example in the
item template, edit item template and insert item template.
This article looks at a design strategy for using CSS with master pages that takes advantage
of CSS to reduce the work required in positioning and sizing controls on webforms.
If your webform is based on a master page, then style information needs either to be directly inserted
into the master page, or a link placed in the master page to refer to a stylesheet;
because master pages are being used, a link to the style sheet can not be placed directly in the
webform as the link needs to go into the head section of the page which is defined in the master page.
CSS benefits and templates
The advantage of the use of CSS described here is that if a form control uses the same
CSS class in each template then you have two main benefits.
- By recording the control width and position in a CSS class, changes made to these attributes
in any one template are saved in the CSS class associated with the control,
and if the control uses the same CSS class in each template,
changes need only be applied once rather than possibly three times.
- Visual Studio can display the CSS information whilst you are editing the control,
which means that applying style changes is very simple.
CSS strategy
The strategy we consider here is to generate one style sheet for each webform in the application,
and define classes in that style sheet for all the controls on the form.
For example, if we have a webform called Supplies.aspx, then we generate a CSS file called
Suppliers.css.
Then we add a reference in our master page to link to this style sheet.
Below we show both a reference to our main application style sheet called StyleSheet.css,
and a reference to a style sheet for the individual page (this list would include one item for each
webform).
Editing a form layout
Shown below is an entry for a label and text box in the suppliers stylesheet Suppliers.css.
And below we see an extract from the webform which references the styles.
Now when we re-size a control in any of the templates (for exmaple in the item template),
changes are updated back into the CSS file.
Below we can see how the change has been automatically updated in the style sheet.
Whilst editing the field, the style properties are also displayed and can be easily edited.
Summary
The technique described here simplifies editing webform layouts. It also simplifies the webform
by placing positional attributes in the style sheet.
In addition to having a stylesheet for each webform
it is also useful to have a general purpose stylesheet which defines default attributes for
single line text boxes and buttons (input) and multi-line text boxes (textarea). Which will get
combined with your css classes when rendering the controls.
We hope this article will give you some more ideas to consider when deciding
on an appropriate CSS strategy for developing your web applications.
Top of Page
MUST+WEB converting Access Databases to .net with Visual Studio or Visual Studio Express. Supports development
in Visual Basic and C# using either SQL, LINQ or EntityData Model data sources. Click below to improve your
development productivity. MUST+WEB can use the CSS design strategy described in this document.
Top of Page
by Andrew Couch Office Access MVP, Director ASC Associates
andy@ascassociates.biz