Issue:
Domino's checkboxes do not align on the web. The result for long checkbox option lists, is a confusing blob of boxes and labels.
Solution/Workaround:
With CSS, we can work around this by giving the checkbox it's own div and applying styles to it's options.
Note: With this option, we are already using the | (pipe) to add a span tag. You will need to adjust your code accordingly.
Add to the web page's stylesheet:
.checkboxalign {
padding: 0px;
margin: 0px;
width: 466px; }
.checkboxalign span {
padding 0px;
margin: 0px;
float: left;
display: inline;
width: 125px; }
.checkboxalign input {
padding: 0px;
margin: 0px;
float: left;
width: 30px; }
.checkboxalign br {
clear: both; }
The input is the checkbox itself. The span is the option text the user sees next to the checkbox input. The align makes the alignment happen. The br style handles the last input. The formula is (input + span) * number columns = align. For our example, we set the checkbox field properties to 3 columns and the formula result for us is (30 + 125) * 3 = 465. Experience says to add a pixel or few when doing these kinds of "hacks".
Add to the field on the form:
Use passthrough HTML and add a DIV around the field itself like:
<div class="checkboxalign"> FieldItem </div>
Finally, change the formula for the options of the field itself:
tmp:=MyOptions;
"" + tmp + " | " + tmp
That's it, tweek the formula until you have your layout the way you want. Remember to set the number of columns in the field's properties.
previous page
|