Tip: Limitting the size of Web Screen sections

Tip: Limitting the size of Web Screen sections

While illustrating a different Service Studio functionality (last year, in this very forum), Paulo Leitão of Keep It Simple used a very simple yet effective trick that I took the liberty of highlighting in this post, in case it went unnoticed.

If you have a section of a Web Page that you want to limit the height of (resorting to a scrollbar when the contents don't fit) you can precede it with an Expression widget with the following properties

Expression: "<DIV style='height: 100px; overflow: auto;'>"
Escape Content: No

All other properties' values are unimportant, and the desired height can be changed from 100px to whatever suits your needs.

To mark the end of the mentioned section, you should place a tag-closing Expression afterwards, with these properties

Expression: "</DIV>"
Escape Content: No

This trick is of particular use around Table or Table Record sections.

Should you want to limit the area both vertically and horizontally, change the first expression to

Expression: "<DIV style='height: 100px; width: 150px; overflow: auto;'>"

This will provide you with horizontal, as well as vertical scrollbars, if needed.

To always display scrollbars, even if they are not necessarily needed (because there is enough space), you can change the overflow style to scroll.