FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.



Mar 25, 2015, 4:46 PM
90 Posts

Make 3 column check box

  • Category: Styles and Themes
  • Platform: Not Applicable
  • Release: 9.0.1
  • Role: Developer
  • Tags: Check Box
  • Replies: 2

I'm trying to make the following check box go to three columns. I'm reasonably good at CSS programming but getting a handle on this is eluding me; it's just not responding whatever I do.

Any tips for how to make a 2, 3 or 4 column check box? Thanks.

 

here's the xpages code:

    <xp:checkBoxGroup value="#{Report.NaturalSciences}" id="NaturalSciences"
        styleClass="threeColumnCheckboxGroup" style="width:30%">
        <xp:selectItem itemLabel="Biological sciences – Aerobiology"
            itemValue="Biological sciences – Aerobiology">
        </xp:selectItem>
        <xp:selectItem itemLabel="Biological sciences – Bacteriology"
            itemValue="Biological sciences – Bacteriology">
        </xp:selectItem>
        <xp:selectItem
            itemLabel="Biological sciences – Behavioural biology"
            itemValue="Biological sciences – Behavioural biology">
        </xp:selectItem>
        <xp:selectItem
            itemLabel="Biological sciences – Biochemistry &amp; molecular biology"
            itemValue="Biological sciences – Biochemistry &amp; molecular biology">
        </xp:selectItem>
    </xp:checkBoxGroup>

 

 

Here is the source code being generated in the browser.

<fieldset id="view:_id1:NaturalSciences" style="width:30%" class="threeColumnCheckboxGroup">
<table role="presentation" class="threeColumnCheckboxGroup" style="width:30%">
<tr>
<td><label for="view:_id1:NaturalSciences:0"><input id="view:_id1:NaturalSciences:0" name="view:_id1:NaturalSciences" value="Biological sciences &#8211; Aerobiology" type="checkbox">Biological sciences &#8211; Aerobiology</label></td>
<td><label for="view:_id1:NaturalSciences:1"><input id="view:_id1:NaturalSciences:1" name="view:_id1:NaturalSciences" value="Biological sciences &#8211; Bacteriology" type="checkbox">Biological sciences &#8211; Bacteriology</label></td>
<td><label for="view:_id1:NaturalSciences:2"><input id="view:_id1:NaturalSciences:2" name="view:_id1:NaturalSciences" value="Biological sciences &#8211; Behavioural biology" type="checkbox">Biological sciences &#8211; Behavioural biology</label></td>
</tr>
</table>
</fieldset>
 

 

here's my increasingly desperate attempts to try to figure out how to talk to xpages via css.

 

.threeColumnCheckboxGroup { display: inline; };
.threeColumnCheckboxGroup tbody { border: 1px solid red; };
.threeColumnCheckboxGroup tr { float: left; width: 32%; };
.threeColumnCheckboxGroup td { float: left; width: 32%; };
#id1:NaturalSciences td { float: left; width: 32%; };
.threeColumnCheckboxGroup tbody tr td { float: left; width: 32%; };
.threeColumnCheckboxGroup>tbody>tr>td { float: left; width: 32%; };

 

Mar 26, 2015, 2:50 PM
90 Posts
thanks been working from that one

Thanks, been working from that one... I think it's not working because not all the table codes are actually generated for the css to kick in on maybe, dunno.


FORUM PLAN UPDATE
Date revision: This forum will remain open to new posts and responses until December 1, 2018. (After that date, you will still be able to view and search the forum.) Also, we're taking a second look at the best place to host future conversation. For now, keep using this forum, and stay tuned for more news.