Personal tools
How to control the web layout of radio buttons in Lotus Domino form

WORKAROUND #1

Aug 02, 2013

How to control the web layout of radio buttons in Lotus Domino form

Sometimes you come across "limitations" imposed by Lotus Domino. This is a little trick to control the layout of radio button on web, and feeling happy!

I come to work every day with Lotus Domino Web applications, often in the "old way" (i.e. without the use of XPages). Although the tools provided are versatile and powerful, I came across a layout problem in the use of a radio button. Let's see what I mean.

 

Scenario

In a Domino radio button it is possible to specify any number of options to be displayed, but on a limited number of columns (maximum 8).

No matter if the need is to show eight options in eight columns

but what if the options are more than eight and you want to show inline?

The problem

This is what happens, for example trying to show inline nine options:

layout is split over two lines, this is because Domino automatically generates a tag "<br>" in the code of the radio buttons:

<label><input type="radio" name="Untitled" value="1">1</label>
<label><input type="radio" name="Untitled" value="3">3</label>
<label><input type="radio" name="Untitled" value="5">5</label>
<label><input type="radio" name="Untitled" value="7">7</label>
<label><input type="radio" name="Untitled" value="9">9</label><br>
<label><input type="radio" name="Untitled" value="2">2</label>
<label><input type="radio" name="Untitled" value="4">4</label>
<label><input type="radio" name="Untitled" value="6">6</label>
<label><input type="radio" name="Untitled" value="8">8</label>

The solution

To overcome this drawback I found this workaround:

  1. include the radio button in an inline <span>
  2. hide the <br> within that <span> (via CSS)

 

and magically options are arranged in a single line! (obviously, you can put these rules inside a CSS file instead of inline...)

But... there's more!

As you will see, there is a problem of sorting label options:

In this case the solution is set to a minimum the number of columns of the radio button (1) and all resolves

At the end...

There are several cases where Lotus Domino handle HTML rendering in its own way, but I think with a little CSS rules, nothing is impossible!

Stay tuned!

comments powered by Disqus