Tuesday 3 May 2011

Making a CHECKBOX field align nicely on a Domino form

I was asked by my padowan in Austrailia today how to ensure that a multi colum CHECKBOX field on a Domino web app form can be made to line up properly.

There are several methods of doing this, however given the requirements that my padowan had this is the solution I gave her.

If you look at the RAW code that the domino server produces for a CEHCKBOX element you will notice that it created a [LABEL] envelope that contains the [INPUT] tag and the option's text. Depending on the number of columns you have defined on the field there will also be a [BR] tag inserted after that number of [LABEL]s have been placed on the form.

So how do we force the HTML and CSS to our will?

Well the first thing to do is work out how wide your [LABEL] set needs to be to incorporate both the checkbox itself, a margin, and the text label. Once we have this information we can work out how wide a container that will hold the columns needs to be, lets say 6 columns where each [LABEL] is 155px wide.
x155 = 930px. So we now know that a container for the SELECT needs to be a minum of 930px wide.

So I create a containing [DIV] for the field and syle it to be 930px wide
I place the field in the containing [DIV], the number of columns can be set to anything as it will be ignored
I create CSS that sets [BR] display to none , effectively turning it off
I then create CSS rule for [LABEL]s inside the containing [DIV] so they are BLOCK and of a known width

So the code looks like this :-

 Resulting in a display of the CHECKBOX like this all nicely lined up in the browser window

Disqus for Domi-No-Yes-Maybe