0

I have my visualforce page so close but I'm having an issue with what happens when specific td cells are left unrendered. It doesn't show the information but it leaves a big space where the information should go. You can see in the picture the big spaces where fields would be but we don't want them due to specific criteria on this specific opportunity so they aren't rendered. I want it to just ignore the if that one is left unrendered. I've tried <td:empty { display: none; }> and <td display:none> but it gives me an error saying I must use the = sign. So I've tried <td display= "none"> but that continues to show the empty space. I've tried <td class="empty"> with the following style added to the VF page: <style> td:empty { visibility: hidden; } </style> but that doesn't do anything either. I've tried telling the td itself to not render but that doesn't do anything. I know this is probably something simple but I just can't see to get it to work. Thanks so much.

<apex:page standardController="Opportunity" extensions="OLIController" >
<style>
td:empty {
  visibility: hidden;
}
</style>

<apex:form id="form">
<apex:pageBlock title="Opportunity Products">
<table class="empty">
<apex:repeat var="OLI" value="{!OLIs}" id="newProduct">
<tr>
<td style='width: 50px'><div style="color:black;font-size: 12px; font-weight: bold">Product Name</div></td>
<td><div style="color:black;font-size: 12px; font-weight: bold">Amount</div></td>
<td><div style="color:black;font-size: 12px; font-weight: bold">Discount</div></td>
<td display= "none"><apex:outputText value="Closed Amount" rendered="{!OR(CONTAINS(profilename, "Sales Operations"), CONTAINS(profilename, "SalesOps"))}" /></td>
<td class="empty"><apex:outputText value="Closed NB Amount" rendered="{!OR(CONTAINS(profilename, "Sales Operations"), CONTAINS(profilename, "SalesOps"))}" /></td>
<td><apex:outputText value="Potential Pilot Conversion Amount" rendered="{!AND(CONTAINS(opportunity.Type,"Pilot"), NOT(CONTAINS(opportunity.Type,"Conversion")))}"/></td>
<td><apex:outputText value="Expansion Amount" rendered="{!AND(CONTAINS(recordTypeName, "Renewal"), NOT(CONTAINS(OLI.Product2.Name, "PD")))}"/></td>
<td><apex:outputText value="Renewal Basis" rendered="{!AND(CONTAINS(recordTypeName, "Renewal"), NOT(CONTAINS(OLI.Product2.Name, "PD")))}"/></td>
</tr>

<tr>
<td style='width: 50px'><apex:outputText value="{!OLI.Product2.Name}" /></td>
<td><apex:inputfield id="UnitPrice" value="{!OLI.UnitPrice}"/></td>
<td><apex:inputfield id="Discount" value="{!OLI.Discount}"/></td>
<td display= "none"><apex:inputfield id="Closed_Amount__c" value="{!OLI.Closed_Amount__c}" rendered="{!OR(CONTAINS(profilename, "Sales Operations"), CONTAINS(profilename, "SalesOps"))}"/></td>
<td class="empty"><apex:inputfield id="Closed_NB_Amount__c" value="{!OLI.Closed_NB_Amount__c}" rendered="{!OR(CONTAINS(profilename, "Sales Operations"), CONTAINS(profilename, "SalesOps"))}"/></td>
<td><apex:inputfield id="Potential_Pilot_Conversion_Amount__c" value="{!OLI.Potential_Pilot_Conversion_Amount__c}" rendered="{!AND(CONTAINS(opportunity.Type,"Pilot"), NOT(CONTAINS(opportunity.Type,"Conversion")))}"/></td>
<td><apex:inputfield id="Expansion_Amount__c" value="{!OLI.Expansion_Amount__c}" rendered="{!AND(CONTAINS(recordTypeName, "Renewal"), NOT(CONTAINS(OLI.Product2.Name, "PD")))}"/></td>
<td><apex:inputfield id="Renewal_Basis__c" value="{!OLI.Renewal_Basis__c}" rendered="{!AND(CONTAINS(recordTypeName, "Renewal"), NOT(CONTAINS(OLI.Product2.Name, "PD")))}"/></td>
</tr>
<tr>
<td colspan="5"><apex:outputText >
    <div style="color:white;font-size: 20px;font-weight: bold;align-content: center;margin-top: 20px">
        ---------------------------------------------------------------------------------------
    </div>
</apex:outputText>
</td>
</tr>
<tr>
<td style='width: 50px'><div style="color:black;font-size: 12px; font-weight: bold">Contract Term</div></td>
<td><div style="color:black;font-size: 12px; font-weight: bold">Product Specific Contact</div></td>
<td class="empty"><apex:outputText value="# of Students" rendered="{!NOT(CONTAINS(OLI.Product2.Name, "PD"))}"/></td>
<td><apex:outputText value="# of Teachers" rendered="{!AND(NOT(CONTAINS(OLI.Product2.Name, "PD")),CONTAINS(OLI.Product2.Name, "Education"))}"/></td>
<td><apex:outputText value="Subject" rendered="{!CONTAINS(OLI.Product2.Name, "IXL Learning")}"/></td>
<td><apex:outputText value="Grade Levels" rendered="{!CONTAINS(OLI.Product2.Name, "IXL Learning")}"/></td>
<td><apex:outputText value="PLS Type" rendered="{!CONTAINS(OLI.Product2.Name, "PD")}" /></td>
</tr>

<tr>
<td style='width: 50px'><apex:inputfield id="Contract_Term__c" value="{!OLI.Contract_Term__c}" rendered="{!NOT(CONTAINS(OLI.Product2.Name, "PD"))}"/></td>
<td><apex:inputfield id="Product_Specific_Contact__c" value="{!OLI.Product_Specific_Contact__c}"/></td>
<td class="empty"><apex:inputfield id="of_Students__c" value="{!OLI.of_Students__c}" rendered="{!NOT(CONTAINS(OLI.Product2.Name, "PD"))}"/></td>
<td><apex:inputfield id="of_Teachers__c" value="{!OLI.of_Teachers__c}" rendered="{!AND(NOT(CONTAINS(OLI.Product2.Name, "PD")),CONTAINS(OLI.Product2.Name, "Education"))}"/></td>
<td><apex:inputfield id="Subject__c" value="{!OLI.Subject__c}" rendered="{!CONTAINS(OLI.Product2.Name, "IXL Learning")}"/></td>
<td><apex:inputfield id="Grade_Levels__c" value="{!OLI.Grade_Levels__c}" rendered="{!CONTAINS(OLI.Product2.Name, "IXL Learning")}"/></td>
<td><apex:inputfield id="PLS_Type__c" value="{!OLI.PLS_Type__c}" rendered="{!CONTAINS(OLI.Product2.Name, "PD")}" /></td>
</tr>
<tr>
<td colspan="5"><apex:outputText >
    <div style="color:black;font-size: 15px;font-weight: bold;align-content: center;margin-top: 40px;margin-bottom: 10px">
        -----------------------------------------------------------------------------------------------------------------------------
    </div>
</apex:outputText>
</td>
</tr>

</apex:repeat>
</table>

<div align="center">
<apex:pageblockButtons location ="bottom">

<apex:commandButton value="Back" action="{!cancel}"
                styleClass="btn" 
                style="text-decoration:none;padding:4px;font-size: 12px; font-weight: bold">
                </apex:commandButton>
                <apex:commandLink value="Save" action="{!save}" 
                target="_parent" styleClass="btn" 
                style="text-decoration:none;padding:4px;font-size: 12px; font-weight: bold">
                </apex:commandlink>
                                </apex:pageblockButtons>
                                </div>
</apex:pageBlock>
                
        


    </apex:form>
</apex:page>

VF Page showing black columns where TD is not rendered

1 Answer 1

1

You should be able to wrap the td tag in an apex:outputPanel and choose the rendering in the rendered attribute.

Quick example

<apex:page >
    <table>
        <tr>
            <td>Output1</td>
            <td>Output2</td>
            <apex:outputPanel rendered="false">
                <td>Output3</td>
            </apex:outputPanel>
            <td>Output4</td>
            <td>Output5</td>
        </tr>
    </table>
</apex:page>

Renders as such

enter image description here

5
  • That works if I just do the rendered="false" but if I try to add my criteria for rendering it gives me a weird error saying the output panel needs an end tag. Strangely it says the error is on the line that has the end tag "The element type "apex:outputPanel" must be terminated by the matching end-tag "</apex:outputPanel>""
    – Ahowell
    Oct 12, 2023 at 22:09
  • <apex:outputPanel rendered="{!NOT(CONTAINS(OLI.Product2.Name, "PD"))}"> <td><apex:outputText value="Contract Term" rendered="{!NOT(CONTAINS(OLI.Product2.Name, "PD"))}"/></td> </apex:outputPanel>
    – Ahowell
    Oct 12, 2023 at 22:11
  • I tried an if statement and it also gave the error saying the output panel wasn't terminated properly <apex:outputPanel rendered="{!IF(NOT(CONTAINS(OLI.Product2.Name, "PD")),TRUE,FALSE)}"> <td><apex:outputText value="Contract Term" rendered="{!NOT(CONTAINS(OLI.Product2.Name, "PD"))}"/></td> </apex:outputPanel>
    – Ahowell
    Oct 12, 2023 at 22:13
  • @Ahowell Its because you have double quotes in the logic so its terminating it prematurely. You need to use single quotes in order to get it to save correctly. Like <apex:outputPanel rendered="{!NOT(CONTAINS(OLI.Product2.Name, 'PD'))}"> Oct 12, 2023 at 22:28
  • 1
    Ah thanks. I even saw something about that but at the time I was focused on an if then statement with true false in quotes and I didn't even notice that PD was surrounded by quotes. Sorry about that. Thanks so much for your help it's working now.
    – Ahowell
    Oct 12, 2023 at 23:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .