Wednesday
Mar262003
Use STYLE tags to control richText fields
March 26, 2003
My preferred approach to design and coding is to first decide how the interface should appear and behave, and THEN figure out how to make it happen.
One of the thorns in my side when I first tried using a richText field on the web a couple of years ago was the challenge of controlling the look of the generated textarea. The default textarea from Domino is 7 rows by 50 columns, and (as I recall) is Times or Courier. The default size is never what I really want, and I tend to develop pages that display Verdana or other sans-serif font.
Solution: Use STYLE parameters. A couple of years ago I would put ROWS and COLS parameters in the 'Other' portion of the Field's HTML tab. Now I prefer to specify settings in the 'Style' area of the same tab:
For a recent app, the settings I used for one richText field were
height:78px; width:250px; font-family: Verdana, sans-serif;
Here's how the richText field renders as a textarea before using the STYLE settings:
...and here it is after:
In this case, I had some other CSS that was also ensuring that the text came in as Verdana, so I got a bit redundant on the HTML tab.
In a similar vein, folks will often have a field located within a table or DIV. In this case, I think the easiest way to allow the richText area to render as a textarea that uses the maximum available width, is to simply include a STYLE 'width' parameter set to 100%: width:100%;
Of course, in the best tradition supporting the notion of the cobbler's children with no shoes, you may notice that there are several parts of this site that could use a bit of cosmetic attention. All in time...all in time.
One of the thorns in my side when I first tried using a richText field on the web a couple of years ago was the challenge of controlling the look of the generated textarea. The default textarea from Domino is 7 rows by 50 columns, and (as I recall) is Times or Courier. The default size is never what I really want, and I tend to develop pages that display Verdana or other sans-serif font.
Solution: Use STYLE parameters. A couple of years ago I would put ROWS and COLS parameters in the 'Other' portion of the Field's HTML tab. Now I prefer to specify settings in the 'Style' area of the same tab:
For a recent app, the settings I used for one richText field were
height:78px; width:250px; font-family: Verdana, sans-serif;
Here's how the richText field renders as a textarea before using the STYLE settings:
...and here it is after:
In this case, I had some other CSS that was also ensuring that the text came in as Verdana, so I got a bit redundant on the HTML tab.
In a similar vein, folks will often have a field located within a table or DIV. In this case, I think the easiest way to allow the richText area to render as a textarea that uses the maximum available width, is to simply include a STYLE 'width' parameter set to 100%: width:100%;
Of course, in the best tradition supporting the notion of the cobbler's children with no shoes, you may notice that there are several parts of this site that could use a bit of cosmetic attention. All in time...all in time.