1

I am making a table that has within it to fill it with rows and fill the cells with information.

I cannot use a pageBlockTable as I am using many sets of information that all need to go into the same table, and because I am using bootstrap and need to make the page appear a certain way.

For some reason when the page renders as HTML the Table, and the repeats inside of it render incorrectly, with the values being rendered as tags above the actual table.

Visualforce:

<apex:outputPanel id="priceTableBreakdown" rendered="{!selectedProducts_OneTime.size != 0 || customContentList_OneTime.size != 0 || selectedProducts_Monthly.size != 0 || customContentList_Monthly.size != 0 || selectedProducts_Yearly.size != 0 || customContentList_Yearly.size != 0}">
    <table class="table table-bordered table-striped">
        <apex:outputPanel rendered="{!selectedProducts_OneTime.size != 0 || customContentList_OneTime.size != 0}">
            <tr>
                <td class="text-center info" colspan="5">
                    One Time Fees
                </td>
            </tr>                                        

            <tr>
                <th><div class="pull-right">Item</div></th>
                <th class="text-center">Quantity</th>
                <th class="text-center">Unit Price</th>
                <th class="text-center">Total Fee</th>
                <th class="text-center">Total Discounted Fee</th>
            </tr>

            <apex:repeat value="{!selectedProducts_OneTime}" var="listItem">
                <tr>
                    <!-- <td>'s and their content go here -->
                </tr>
            </apex:repeat> 

            <apex:repeat value="{!selectedProducts_Monthly}" var="listItem">
                <tr>
                    <!-- <td>'s and their content go here -->
                </tr>
            </apex:repeat> 
            <apex:repeat value="{!selectedProducts_Yearly}" var="listItem">
                <tr>
                    <!-- <td>'s and their content go here -->
                </tr>
            </apex:repeat>
        </apex:outputPanel>
    </table>
</apex:outputPanel>

HTML Render:

<span id="j_id0:j_id4:priceTableBreakdown">
    <span id="j_id0:j_id4:j_id121">
        One Time Fees 
        <div class="pull-right">Item</div>
        QuantityUnit PriceTotal FeeTotal Discounted Fee 
        <div class="pull-right">Activation &amp; Setup</div>
        <span id="j_id0:j_id4:j_id123:0:j_id127">10</span>
        $ 150.00
        <span id="j_id0:j_id4:j_id123:0:j_id136">$ 1,500.00</span>
        <span id="j_id0:j_id4:j_id123:0:j_id143">$ 1,500.00</span> 
        Total One Time Fees$ 150.00$ 1,500.00$ 1,500.00</span>
    <table class="table table-bordered table-striped"></table>
</span>

Is this a glitch, or is there something with how it's being put in causing it to render this way?

6

You need to use outputText instead of outputPanel. outputPanel is intended to be used as reRender targets, and to group content together. The documentation for outputPanel states:

A set of content that is grouped together, rendered with an HTML <span> tag, <div> tag, or neither. Use an <apex:outputPanel> to group components together for AJAX refreshes.

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.