How to control view column widths on the web

How to control view column widths on the web

You Can View User Feedback To This Tip

I often need to control width of columns in web views. It is possible to create view treated as HTML and get almost full control on how it will look but you loose some advantages of Domino generated views (e.g. ability to present documents in categories).

The trick takes advantage of pass-thru HTML code. I placed my own <TH> tags in column titles and commented-out tags generated by Domino.

In this example I have documents with fields Name, City and Address and a view with 3 columns: City, Name and Address, categorized by 1st column. Widths of the columns are Name = 65%, Address = 35%.

First of all I remove all formatting tags by resetting font to "Default Sans Serif", 10pt and set color to black in all column titles 

A title text for the first column is (without quotes):

"[</TH><!-- " 

I started pass-thru HTML code with left bracket, closed the first <TH> 
tag (generated by Domino) and commented-out next <TH> tag.

Second column's title (without quotes):

" --><TH WIDTH=65%>Name</TH><!-- " 

First I closed comment tag from previous title then added my own <TH>
 element and again commented-out following Domino-generated <TH> tag.

And the last column's title is (without quotes again):

" --><TH WIDTH=35%>]Address"

Here I closed previous

    Requires Free Membership to View

    Login

    Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.

    By submitting your registration information to SearchDomino.com you agree to receive email communications from TechTarget and TechTarget partners. We encourage you to read our Privacy Policy which contains important disclosures about how we collect and use your registration and other information. If you reside outside of the United States, by submitting this registration information you consent to having your personal data transferred to and processed in the United States. Your use of SearchDomino.com is governed by our Terms of Use. You may contact us at webmaster@TechTarget.com.

 comment again, added opening <TH> tag then closed
 pass-thru HTML with right bracket. The closing </TH> tag will be
 generated by Domino.

And here is how the source code looks in a web browser:

.
.
.
<TH NOWRAP ALIGN=left></TH><!-- </TH>
<TH NOWRAP ALIGN=left> --><TH WIDTH=65%>Name</TH><!-- </TH>
<TH NOWRAP ALIGN=left> --><TH WIDTH=35%>Address</TH>
.
.
.

As you can see there is no way how to add parameters to the fist column's tag.
In the case of categorized first column this is OK, but if you need to control
first column's <TH> tag too, you will need to add new empty column in
front of it.

I prefer to control formatting of pages by style sheets, but is also possible
to put additional HTML tags inside <TH> elements or add parameters like
NOWRAP or ALIGN to <TH> tag itself. For example the title for Name
column may looks like:

" --><TH NOWRAP WIDTH=65%><B><FONT COLOR=red>Name</FONT></B></TH><!-- "

The code is tested on Domino R5 server.

USER FEEDBACK TO THIS TIP

  • This method uses the Designer IDE and not some PassThru or CSS feature to control the size of the column.

    In the View Design, change the column header to:
    MyLabel[<IMG SRC="/icons/ecblank.gif" BORDER=0 HEIGHT=1 WIDTH=100 >]
    Adjust "MyLabel" and/or WIDTH= —Michel Fecteau

This was first published in April 2001

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top