+ Start a Discussion
Ray Zhao 3Ray Zhao 3 

How to make <apex:sectionHeader> tag wrap?

My title is too long, and it runs off the page.  I used <apex:header  title="{!Troubleshooting__kav.title}" /> tag.  The title is a Text(255) field.  I need to make the title Wrap around 80 characters.  Tried a few things without success...   Any help is appreciated.  Thanks! ray
Best Answer chosen by Ray Zhao 3
Ray Zhao 3Ray Zhao 3
After reverse engineering other pages, I replaced the second line:

  <apex:sectionHeader title="{!Troubleshooting__kav.title}"/>

with:
  <div class="tabArticleRenderer">
    <span id="j_id0:j_id8">
      <div id="j_id0:j_id8:j_id9:j_id50" class="articleRendererHeader">
        <div class="bPageTitle">
          <div class="ptBody secondaryPalette brandSecondaryBrd">
            <div class="content">
              <img src="/s.gif" class="pageTitleIcon" title="Article" alt="Article" />
              <h1 class="pageType noSecondHeader">{!Troubleshooting__kav.title}</h1>
            </div>
          </div>
        </div>
      </div>
    </span>
  </div>

It's now displaying the long titles with wrapped text. 

All Answers

Andy BoettcherAndy Boettcher
Can you show your code?  Depending on where you have it (and how) in the page you can monkey with that a little.
Ray Zhao 3Ray Zhao 3
Sure, but lemme simplify it, I don't think all is needed.  It's the second line that runs off the page, the title field has about 140 characters, and it goes straight out of the page, doesn't wrap.  I tried to put it in a table cell, it didn't work.

<apex:page standardController="Troubleshooting__kav" extensions="AuditTroubleshootAccess">
  <apex:sectionHeader title="{!Troubleshooting__kav.title}"/>
  <knowledge:articleRendererToolBar articleId="{! $CurrentPage.parameters.id}" showChatter="true" />
  <div class="bPageTitle">
    <div class="ptBreadcrumb">&laquo;&nbsp;<a href="/_ui/knowledge/ui/KnowledgeHome?search=">Back to Knowledge Search</a>
    </div>
  </div>
  <apex:pageBlock title="Information: Troubleshooting">
  </apex:pageBlock>
</apex:page>
Ray Zhao 3Ray Zhao 3
After reverse engineering other pages, I replaced the second line:

  <apex:sectionHeader title="{!Troubleshooting__kav.title}"/>

with:
  <div class="tabArticleRenderer">
    <span id="j_id0:j_id8">
      <div id="j_id0:j_id8:j_id9:j_id50" class="articleRendererHeader">
        <div class="bPageTitle">
          <div class="ptBody secondaryPalette brandSecondaryBrd">
            <div class="content">
              <img src="/s.gif" class="pageTitleIcon" title="Article" alt="Article" />
              <h1 class="pageType noSecondHeader">{!Troubleshooting__kav.title}</h1>
            </div>
          </div>
        </div>
      </div>
    </span>
  </div>

It's now displaying the long titles with wrapped text. 
This was selected as the best answer