2

I have a very simple Visualforce page. It is not using a controller, it is mostly a splash page. I wanted to use outputlink tags in a list. I'm using CSS styling to determine how my headers look, and I want the options to look like headers, so it would look like this:

Title

  • Header 1
  • Header 2

I want the Header 1 and Header 2 to be links. However, no matter what I do, I cannot get them to appear as a list and still have the links work. If I use <p> or <br> I can get my line breaks, but the last value in the list is the only one which will work as a link. The others do not. I have also tried a list in CSS (<ul>). If I take out all tags, the <apex:outputlink> links appear in a single row, and they all work correctly. As soon as I put anything back, the last option is the only one which works.

Code snippet below:

<style>
h3{
  color:black;
  text-align:right;
  padding:30px;
  font-size:18px;
  line-height:125%;
  border:25px;
}       
</style>

<h2>
    Page Title
</h2><p></p>

  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000001l65y">Link 1</apex:outputLink></h3><br></br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000HquV">Link 2</apex:outputLink></h3><br></br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000Hqtx">Link 3</apex:outputLink></h3><br></br>

What am I missing?

|improve this question
2

I think you are just mising a "/" in your first br. Try this. 

<h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000001l65y">Link 1</apex:outputLink></h3>**</br>**</br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000HquV">Link 2</apex:outputLink></h3>**</br>**</br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000Hqtx">Link 3</apex:outputLink></h3>**</br>**</br>

Another tip...When faced with such niggling issues, always use a tool like JsFiddle to help you troubleshoot...Replace the apex tags with their html versions. For example, <Apex:outputlink> corresponds to an anchor tag (<a href>)

I created one for you to continue to test with.

https://jsfiddle.net/33s4ku8j/

EDIT:

Updated code after finding the problem with the CSS.

<apex:page >
 <style>
h3{
  color:black;
  text-align:right;  
  font-size:18px;  
  border:25px;
}       
</style>

<h2>
    Page Title
</h2><p></p>

   <ul>
  <li><apex:outputLink value="/?id=a08j0000001l65y"><h3>Link 1</h3></apex:outputLink></li><br/>
  <li><h3><apex:outputLink value="/?id=a08j0000000HquV">Link 2</apex:outputLink></h3></li><br/>
  <li><h3><apex:outputLink value="/?id=a08j0000000Hqtx">Link 3</apex:outputLink></h3></li><br/>
  </ul>
</apex:page>
|improve this answer
  • Thanks for the JsFiddle tip! Very useful for troubleshooting. Unfortunately the br (even with your edit) continues to work at making the line break but the first two lines are not hot links, only the third. I'm perplexed as to why this is. – mpusto Apr 11 '15 at 1:04
  • Post your updated code. I will help you with this. – Richard N Apr 11 '15 at 1:08
  • Ok I found your problem..It was not anything to do with the apex tags. The links were working but due to your CSS (paddin) the anchors were forming above. See my updated code. That will help you see the list as well as all three links should work. – Richard N Apr 11 '15 at 1:24
  • Perfect! Thanks, that totally fixed it. Didn't realize the CSS was interfering. – mpusto Apr 11 '15 at 2:30
  • Please do up-vote answers if it helped. Glad I could help! – Richard N Apr 11 '15 at 4:01

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.