0

How do you display title on apex:outputPanel and in my particular scenario I can not use pageBlock due to this issue see here.

I also tried using <apex:facet but did not do anything.

Here is the code:

<apex:panelGrid columns="2" border="0" width="100%"> 
    <apex:outputPanel layout="block" id="op1" title="aaa">  
           <analytics:reportChart reportId="00O56300000aAsb"   
                showRefreshButton="true"/>   
    </apex:outputPanel>
    <apex:outputPanel layout="block" id="op2" title="bbb">  
          <analytics:reportChart reportId="00O34000000aAnb"  
               showRefreshButton="true" /> 
    </apex:outputPanel>
</apex:panelGrid>

enter image description here

Improve this question

2 Answers 2

Reset to default
2

You can just directly put html tags inside it to use it as a title: 

<apex:panelGrid columns="2" border="0" width="100%"> 
    <apex:outputPanel layout="block" id="op1" title="aaa"> 
           <h2>aaa</h2>
           <analytics:reportChart reportId="00O56300000aAsb"   
                showRefreshButton="true"/>   
    </apex:outputPanel>
    <apex:outputPanel layout="block" id="op2" title="bbb">  
          <h2>bbb</h2>
          <analytics:reportChart reportId="00O34000000aAnb"  
               showRefreshButton="true" /> 
    </apex:outputPanel>
</apex:panelGrid>

Please note that title in apex:outputPanel is only the display information which displays when your mouse hovers over it. It is not the actual title.

Improve this answer
0

You can use more than two outputPanels; the table is generated dynamically using as many rows as necessary to satisfy the columns attribute:

<apex:panelGrid columns="2" border="0" width="100%"> 
    <apex:outputPanel>
        <h1 style="text-align: center; display: block">Title 1</h1>
    </apex:outputPanel>
    <apex:outputPanel>
        <h1 style="text-align: center; display: block">Title 2</h1>
    </apex:outputPanel>
    <apex:outputPanel layout="block" id="op1" title="aaa">  
           <analytics:reportChart reportId="00O56300000aAsb"   
                showRefreshButton="true"/>   
    </apex:outputPanel>
    <apex:outputPanel layout="block" id="op2" title="bbb">  
          <analytics:reportChart reportId="00O34000000aAnb"  
               showRefreshButton="true" /> 
    </apex:outputPanel>
</apex:panelGrid>
Improve this answer
3
  • does not show the align: center
    – Nick
    Commented Nov 16, 2016 at 15:29
  • @NickKahn I just tested it in my org, it just needed a minor tweak. Try new the version.
    – sfdcfox ♦
    Commented Nov 16, 2016 at 15:50
  • thanks I see it now in center but is there a way to put the apex:outputpanel in the center of the page? like those two outputpanel i have is all the way to left, is there a way to make it center of the page and divide the width of each to be 50%
    – Nick
    Commented Nov 16, 2016 at 16:09

You must log in to answer this question.

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