I need to render a tag based on the value of layoutObj.colOneInputType.Required. But i cannot use the outputpanel rendered attribute for the implementation of the same! Any work arround?

here is my code snippet. the problem statement here is that i want to add a red vertical bar as used by salesforce for denoting required textareas whereas for non mandatory text areas i dont want to display the bar.

<apex:outputPanel rendered="{!If(layoutObj.colOneInputType.dataType=='textarea',true,false)}">
<div class="testrequiredInput">
  <div class="testrequiredBlock"></div>
  <apex:inputTextarea rows="3" styleclass="clsInputTextArea srm_clsDynamicInputTextArea" title="{!layoutObj.colOneInputType.Tooltip}" id="textArea"  value="{!layoutObj.colOneInputType.value}" onChange="checkVisibility('{!layoutObj.colOneInputType.isChangeNeedRefresh}');"   disabled="{!isViewMode}" onkeyup="validateMaxLength(this);"/>
<apex:outputPanel rendered="{!If(layoutObj.colOneInputType.URLInfo!=null,true,false)}">
<input type="button" class="urlButtonDeactivated1" title="{!layoutObj.colOneInputType.URLInfo}" style="margin-left:2px;cursor:pointer" onmouseout="this.className='urlButtonDeactivated1'" onmouseover="this.className='urlbutton1';" onclick="window.open('{!layoutObj.colOneInputType.URLInfo}','_blank','height=500,width=1000,left=170,top=100,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,status=no')"/>

2 Answers 2


Have you tried using style attribute like this inside the div:

style="{!IF(layoutObj.colOneInputType.Required, 'display:block', 'display:none')}" 

Why can you not use an tag?

If you add layout="block"the output panel get rendered as a <div>

If you add layout="non" the output panel does not output to the page but its contents do

If you add layout="inline" the output panel gets rendered as a <span>

So it seems to me if you use output panel with layout="none" then it should meet your needs

Another way to do it is using jQuery and some scripting:


        $(document).ready(function() {


                showRedMark(this, true);



    function showRedMark(a, b){

                $(a).parent("td").prepend("<div class='requiredBlock'></div>");
                $(a).parent("td").contents().wrapAll("<div class='requiredInput'/>");

When you render the tag use:


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.