3

Selectoptions used in SelectCheckboxes shows the checkboxes in a single Row. I need to show the checkboxes in different rows. Ho can this be acheived.

My code is :

<!-- Page: -->
<apex:page controller="sampleCon">

    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
               <tr>
                <apex:selectCheckboxes borderVisible="true" value="{!countries}" styleClass="check">
                       <apex:selectOptions value="{!items}" />
                </apex:selectCheckboxes>
                </tr>
                <apex:commandButton value="Test" action="{!test}" rerender="out" status="status"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
 </apex:page>

My Controller is : ** Controller: **

public class sampleCon {

    public List<SelectOption> items{get;set;}
    public List<String> countries {get;set;}

    public PageReference test() {
        return null;
    }

    public sampleCon(){
        getItems();
    }

    public void getItems() {

        items= new List<SelectOption>();
        countries = new List<String>();
        /*
        options.add(new SelectOption('US','US'));
        options.add(new SelectOption('CANADA','Canada'));
        options.add(new SelectOption('MEXICO','Mexico'));
        */
        Schema.DescribeFieldResult F = Case.Numbers__c.getDescribe();
        List<Schema.PicklistEntry> P = F.getPicklistValues();
        System.debug(P);
        for (Schema.PicklistEntry a : P)
          { 
             items.add(new SelectOption(a.getLabel(), a.getValue())); 
          }

    }

         public List<String> getCountries() {
            return countries;
         }

         public void setCountries(List<String> countries) {
             this.countries = countries;
         }

    }

The output I get is :

snapshot

5

Use layout="pageDirection" in selectCheckboxes for ex.

<apex:form >
<apex:pageBlock >
    <apex:pageBlockSection columns="2">
       <tr>
        <apex:selectCheckboxes borderVisible="true" value="{!countries}" styleClass="check" layout="pageDirection">
               <apex:selectOptions value="{!items}" />
        </apex:selectCheckboxes>
        </tr>
        <apex:commandButton value="Test" action="{!test}" rerender="out" status="status"/>
    </apex:pageBlockSection>
</apex:pageBlock>

| improve this answer | |
  • 3
    Or in your 'check' class add "display: block;" – Boris Bachovski Jul 17 '14 at 4:45
  • Thanks.It worked. Any Idea how to show the checkboxes in two columns. – Bhoopesh Chauhan Jul 17 '14 at 4:51
  • 1
    For two columns you will need to use CSS. something like display:inline-block – AtulRajguru9 Jul 17 '14 at 5:03
0

Use this CSS :

.check tbody tr td{
    float: left! Important;
    width: 100%;
    }

This thing worked for me.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.