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 :)
14 comments:
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: http://www.quirksmode.org/css/multicolumn.html
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... ;)
Very handy indeed. Thanks for the post.
Seems that it doesn't work for IE (at least IE8).
Have you tried it on a page with nothing else? Some other CSS rules might influence it.
Tried it on a page with nothing else and would not work with IE7.
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.
Changed the doctype per your suggestion. Still won't work in IE7 (Gov. contract requires IE7 compatibility).
Changed the doctype per your suggestion. Still won't work in IE7 (Gov. contract requires IE7 compatibility).
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>).
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.
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.
Works well, if you specify specify Horizontal Layout for the group. Vertical layout doesn't look so good! :-)
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.
it works perfect!!!
thanks
Post a Comment