Problem solve Get help with specific problems with your technologies, process and projects.

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 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

Dig Deeper on Domino Resources - Part 6

SearchWindowsServer

Search400

  • Favorite iSeries cheat sheets

    Here you'll find a collection of valuable cheat sheets gathered from across the iSeries/Search400.com community. These cheat ...

  • HTML cheat sheet

    This is a really cool cheat sheet if you're looking to learn more about HTML. You'll find just about everything you every wanted ...

  • Carol Woodbury: Security

    Carol Woodbury

SearchDataCenter

SearchContentManagement

Close