Thursday, April 14, 2011

Simple trick to format XPages Checkbox group

If you put display:inline on a table (which XPages generates for a CheckboxGroup), you can style each cell like an inline element.

To make a four column checkbox group (put fourColumnCheckboxGroup as styleClass on the xp:checkBoxGroup), put this in your CSS file:
.fourColumnCheckboxGroup { display: inline; }
.fourColumnCheckboxGroup td { float: left; width: 24%; }

For three columns, use 32% and so on. I use (100 / numberOfColumns) - 1 as that seems to work best cross browser.

Share and enjoy :)


Unknown said...

Yeah, well.. It still sucks that they use a table for layout! It's 2011 now...

This unwanted addition of code makes it impossible to benefit from the CSS3 Multi Column Layout:

It's very handy, when you have the option.

Yes, I know that you can write your own component. I will, once I get around do it.

Sorry for my ramblings... ;)

Mirek Navratil said...

Very handy indeed. Thanks for the post.

Mirek Navratil said...

Seems that it doesn't work for IE (at least IE8).

Tommy Valand said...

Have you tried it on a page with nothing else? Some other CSS rules might influence it.

Vern Miles said...

Tried it on a page with nothing else and would not work with IE7.

Tommy Valand said...

Another question.. Which doctype does your XPage have (view source in the browser).

See here how to set the latest doctype.

If it's HTML 4 transitional, the browser is in quirks mode, and the browser is in backwards compatibility mode.

Vern Miles said...

Changed the doctype per your suggestion. Still won't work in IE7 (Gov. contract requires IE7 compatibility).

Vern Miles said...

Changed the doctype per your suggestion. Still won't work in IE7 (Gov. contract requires IE7 compatibility).

Tommy Valand said...

I did a little test/googling. It looks like there is a bug in the CSS 2.1 implementation in IE7.

The only option I can think of is using JavaScript to extract the label nodes in the table, and append(Child) them to list items (<li>).

Mirek Navratil said...

I've returned to this issue after a while. Let me cofirm that the proposed solution really does work for IE8.
Thanks once again for sharing.

Unknown said...

Strange - I copied and pasted the CSS from your posting and then applied the StyleClass to the control and it collapses it down to nothing.

Mark Crosby said...

Works well, if you specify specify Horizontal Layout for the group. Vertical layout doesn't look so good! :-)

O.Vijay said...

It is not working for me. So I changed to row.
.fourColumnCheckboxGroup { display: inline; };
.fourColumnCheckboxGroup tr { float: left; width: 24%; };

This works perfectly fine.
Thanks for your great help.

Anonymous said...

it works perfect!!!