0

Checkboxes Don't Align I have two groups of vertical checkboxes on a Visualforce page and the top one in both columns is about two spaces to the left of the others. What is the best way to format the checkboxes so they are in perfect alignment? enter image description here

Relevant Output Panel

  <apex:pageBlockSection columns="1" title="abc" id="pdSS">
        <apex:outputPanel rendered="{!lsttsw.size > 0}" style="margin-top:10px;">
            <table id="tst" width="100%" style="border-collapse:collapse;margin-top:10px;">
               <thead>
                    <th width="33%">
                        Service Type 
                    </th>
                    <th width="34%">
                        Capabilities 
                    </th>
                    <th width="33%">
                        Sub Capabilities 
                    </th>
                </thead>
                <tbody>
                    <apex:repeat value="{!lsttsw}" var="result">
                        <tr>
                            <td>
                                {!result.ST}
                            </td>
                            <td>
                                {!result.cap}
                            </td>
                            <td>
                                {!result.subcap}
                            </td>
                        </tr> 
                    </apex:repeat>
                </tbody> 
            </table> 
        </apex:outputPanel>

        <apex:outputPanel rendered="{!lstSTs.size > 0}" style="margin-top:10px;">
            <table id="tst" width="100%" style="border-collapse:collapse;margin-top:10px;">
               <thead>
                    <th width="33%">
                        Tier1
                    </th>
                    <th width="34%">
                        Tier2
                    </th>
                    <th width="33%">
                        Tier3
                    </th>
                </thead>

                <tbody>
                    <tr>
                        <td rowspan="100%" style="vertical-align:top;text-align:left;">
                            <apex:selectList size="1" value="{!strSelectedST}"> 
                                <apex:selectoptions value="{!lstSTs}"/>  
                                <apex:actionSupport event="onchange" action="{!pickValChanged}" reRender="pdSS"/>
                            </apex:selectList>
                        </td>
                        <td style="vertical-align:top;text-align:left;">
                            <apex:outputPanel id="cap">
                                <apex:repeat value="{!lstCapabilities}" var="s">
                                    <apex:inputCheckbox value="{!s.b}">
                                        <apex:actionSupport event="onchange" action="{!pickValAddTier3}" reRender="pdSS"/>
                                    </apex:inputCheckbox>
                                    <apex:outputText style="font-weight: bold;" value="{!s.cap}"></apex:outputText>
                                    <br/>
                                </apex:repeat> 
                            </apex:outputPanel> 
                        </td>
                        <td style="vertical-align:top;text-align:left;">
                            <apex:outputPanel id="subcap">
                                <apex:repeat value="{!lstSC}" var="s">
                                    <apex:inputCheckbox value="{!s.b}"/>
                                        <apex:outputText style="font-weight: bold;" value="{!s.cap}"></apex:outputText>
                                    <br/>
                                </apex:repeat> 
                            </apex:outputPanel>  
                        </td>
                    </tr> 
                </tbody> 
            </table> 
        </apex:outputPanel>
  • Well removing your reliance on <br /> tags is probably a good first step. – Adrian Larson Mar 21 '18 at 18:09
  • Hi Adrian, If you want all of the checkboxes to line up vertically, which is exactly what I want, then the <br/> are essential. Without the <br/> tag, the checkboxes display horizontally. I hope this helps anyone trying to list choices vertically in an <apex:repeat>. – Wade Lovell Mar 21 '18 at 21:01
  • A more proper approach would be to wrap them in an element with display: block such as a <div>. – Adrian Larson Mar 21 '18 at 21:02
0

Salesforce CSS was adding 0.5rem to the first line. It was obvious in the developer console when I inspected it. Thanks for looking. If you have this issue, I hope this answer solves your problem as well. Have a great day, Wade

0

I recommend you change your approach to wrap your elements in a block level container.

Instead of:

<apex:repeat>
    <apex:inputCheckbox ... />
    <apex:outputText ... />
    <br />
</apex:repeat>

Use:

<apex:repeat>
    <div>
        <apex:inputCheckbox ... />
        <apex:outputText ... />
    </div>
</apex:repeat>

The latter is much more clear as to your intent and will be significantly easier to work with if you want to add further styling.

  • Thank you. While that may work for future styling it did not, in this case, make an immediate difference to the alignment issue and if one drops the <br/>, one no longer has vertical checkboxes - they display horizontally. – Wade Lovell Mar 22 '18 at 6:26
  • Hi Adrian, Just a word of caution on those div tags, they caused my outputPanel to disappear. Took me a long time to figure out that is what had done it. I ended up adjusting the <td> tag as follows: <td class="slds-scope"> <apex:outputPanel id="cap"> <apex:repeat value="{!lstCapabilities}" var="s"> Does Something </apex:outputPanel> </td> – Wade Lovell Mar 24 '18 at 1:50

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.