function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
tengeltengel 

inputField in HTML Table? (or welcome to other suggestions!)

Hi! I would like to present my users with a custom VF page for entering/editing records. The page will have a number of tables and the cells of these tables will have a mix of hardcoded values and input options. I thought I was on the right track, but when I try to put an apex:inputField in one of the <td> tags, the HTML breaks and my table gets all messed up.

VF code:
<table border="1" style="width:800px">
                        <tbody><tr>
                            <th>EXCLUDE DBL AND BENEFITS</th>
                            <th>SAMPLE</th>
                            <th>YOURS</th> 
                            <th>KEY</th>
                        </tr>
                        <tr>
                            <td>Gross Commission Pr1</td>
                            <td>300000</td>
                            <td></td><td class="dataCol  first " colspan="2"><input id="j_id0:j_id2:j_id3:section1:j_id13" name="j_id0:j_id2:j_id3:section1:j_id13" size="20" style="width:100px" type="text"></td></tr><tr><td class="dataCol  last " colspan="2"></td>
                            <td>Book of Business minus DBL and Benefits</td>
                        </tr>
                    </tbody></table>
Image of broken table:
User-added image
tengeltengel
Whoops, thought I had pasted in my VF code:
<apex:pageBlockSection showHeader="true" id="section1" title="Rolling 12 Month Commission Analysis" columns="2" collapsible="false">
                <script>twistSection(document.getElementById("{!$Component.section1}").childNodes[0].childNodes[0]); </script>
                    <table border="1" style="width:800px">
                        <tr>
                            <th>EXCLUDE DBL AND BENEFITS</th>
                            <th>SAMPLE</th>
                            <th>YOURS</th> 
                            <th>KEY</th>
                        </tr>
                        <tr>
                            <td>Gross Commission Pr1</td>
                            <td>300000</td>
                            <td><apex:inputField label="" value="{!Producer_Goal_Worksheet__c.Rolling_12_Gross_Commission_Pr_1__c}" style="width:100px"/></td>
                            <td>Book of Business minus DBL and Benefits</td>
                        </tr>
                    </table>
                </apex:pageBlockSection>
Boom B OpFocusBoom B OpFocus
have you tried adding "applyHtmlTag="false" to the <apex:page>? like this <apex:page applyHtmlTag="false">

Make sure that the api is 27.0 or later.
Nathan SNathan S
I had this issue by attempting to place a table directly in a PageBlockSection.  I think the InputFields get carried away rendering HTML.

Wrapping the HTML Table with an <apex:outputPanel> tag or, what is probably more appropriate,  <apex:pageBlockSectionItem> then <apex:outputPanel> tags fixed it for me.  If you don't add the outputPanel under the pageBlockSectionItem, you'll get the error that there are more than 2 child elements.

Also, make sure the pageBlockSection has columns set to 1 if you want the table to fill the entire width of the section.